vendor(prop, args)
    -webkit-{prop} args
    -moz-{prop} args
    -ms-{prop} args
    -o-{prop} args
    {prop} args

transform()
	vendor('transform', arguments)

animation()
	vendor('animation', arguments)

barHeight = 3px    
barColor = #3a81f0
bgColor = #b0d0ef


/* Make clicks pass-through */
.ui-mprogress 
    pointer-events: none

    .deter-bar,
    .indeter-bar,
    .query-bar,
    .bar-bg,
    .buffer-bg,
    .mp-ui-dashed 
        position: fixed
        z-index: 1032
        top: 0
        left: 0
        width: 100%
        height: barHeight
        background: barColor

    .bar-bg,
    .buffer-bg
        z-index: 1031
        background: bgColor

    .mp-ui-dashed 
        z-index: 1030
        background:transparent
        &:before 
            content: ""
            display: block
            height: barHeight
            width: 100%
            margin-top: 0px
            position: absolute
            background: radial-gradient(rgb(169, 192, 233) 0%, rgb(169, 192, 233) 16%, transparent 42%)
            background-size: 10px 10px !important
            background-position: 0px -23px
            animation(buffer 3s infinite linear)
    .peg  
        position: absolute
        display: block
        right: 0px
        width: 100px
        height: 100%
        box-shadow: 0 0 10px barColor, 0 0 5px #29d
        opacity: 1
        transform(rotate(3deg) translate(0px, -4px)) 

    .query-bar 
        animation(querying 2800ms infinite linear)
        &.end 
            animation(endquery 1500ms linear)

    .indeter-bar 
        animation(indeterminate 2800ms infinite linear)

.mprogress-custom-parent 
    overflow: hidden
    position: relative

    .deter-bar,
    .indeter-bar,
    .query-bar,
    .bar-bg,
    .buffer-bg,
    .mp-ui-dashed 
        position: absolute


@keyframes querying {
    /* one open*/
  0% {
    transform: translateX(100%) scaleX(0.7) }

  20% {
    transform: translateX(30%) scaleX(0.7) }

  30% {
    transform: translateX(-20%) scaleX(0.4) }

  55% {
    transform: translateX(-100%) scaleX(0.1) }

  55.99% {
    transform: scaleX(0) }

/* two close*/
  56% {
    transform: translateX(100%) scaleX(0) }

  56.99% {
    transform: translateX(100%) scaleX(0.7) }

  70% {
    transform: translateX(35%) scaleX(0.7) }

  85% {
    transform: translateX(-28%) scaleX(0.3) }

  95% {
    transform: translateX(-100%) scaleX(0.1)}

  95.99% {
    transform: scaleX(0) }
  100% {
    transform: translateX(100%)}

}

@keyframes endquery {

  0% {
    opacity: 0
    transform: translateX(-100%) scaleX(1)}

  10% {
    opacity: 1
    transform: translateX(-100%) scaleX(1)}

  99% {
    opacity: 1
    transform: translateX(0%)}
  100% {
    opacity: 0}

}

@keyframes indeterminate {
/* one open*/
  0% {
    transform: translateX(-100%) scaleX(0.2) }

  20% {
    transform: translateX(-40%) scaleX(0.2) }

  30% {
    transform: translateX(0%) scaleX(0.5) }

  55% {
    transform: translateX(100%) scaleX(0.7) }

  55.99% {
    transform: scaleX(0) }

/* two close*/
  56% {
    transform: translateX(-100%) scaleX(0) }

  56.99% {
    transform: translateX(-100%) scaleX(0.6) }

  75% {
    transform: translateX(-5%) scaleX(0.6) }

  85% {
    transform: translateX(30%) scaleX(0.3) }

  98% {
    transform: translateX(100%) scaleX(0.2)}

  99.99% {
    transform: scaleX(0) }
  100% {
    transform: translateX(-100%)}
}

@keyframes buffer {
  0% {
    opacity: 1
    background-position: 0px -23px }

  50% {
    opacity: 0 }

  100% {
    opacity: 1
    background-position: -200px -23px }
 }