.uac-loader{
  position: absolute;
  left: 50%;
  top: 20%;
  z-index: 100;

}

// --------------------------------------
$loader-green: map-get($color-green,'400');
$loader-blue: map-get($color-blue,'400');
$loader-red: map-get($color-red,'400');
$loader-yellow: map-get($color-pink,'400');

$dot-red: #e7524e;
$dot-blue: #00ade4;
$dot-green: #71c458;
$dot-yellow:#fdc331;

.uac-loader-stroke {
	width: 100px;
	height: 100px;
	margin-left: -50px;
	background-color:rgba(255,255,255,0.8);
	// box-shadow: 0 0 6px rgba(0,0,0,0.1);
	border-radius: 50%;
  .circular{
	   animation: ualoader-rotate 2s linear infinite;
	   height: 100px;
	   position: relative;
	   width: 100px;
  }
  .path {
  	// dash的 长度，间隙
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    stroke:$loader-yellow;
    animation: 
     ualoader-dash 1.5s ease-in-out infinite,
     ualoader-color 6s ease-in-out infinite
    ;
    stroke-linecap: round;
  }

}

@keyframes ualoader-rotate{
 100%{
  transform:rotate(360deg);
 }
}
@keyframes ualoader-dash{
 0%{
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
 }
 50%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35;
 }
 100%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124;
 }
}
@keyframes ualoader-color{
  100%, 0%{
    stroke: $loader-red;
  }
  40%{
    stroke: $loader-blue;
  }
  66%{
    stroke: $loader-green;
  }
  80%, 90%{
    stroke: $loader-yellow;
  }
}
// ========================== liquid square ====================----------------
// http://codepen.io/TimPietrusky/pen/Indcm?editors=010
$liquidsquare-alpha: 8em;
$liquidsquare-beta: 50%;
$liquidsquare-gamma: 2.25s;
$liquidsquare-delta: .75;

$color-alpha: rgba(#e74c3c, $liquidsquare-delta);
$color-beta: rgba(#e67e22, $liquidsquare-delta);
$color-gamma: rgba(#8e44ad, $liquidsquare-delta);
$color-delta: rgba(#2980d9, $liquidsquare-delta);

.uac-loader-liquidsquare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: $liquidsquare-alpha;
  height: $liquidsquare-alpha;
  margin: (-$liquidsquare-alpha / 2) 0 0 (-$liquidsquare-alpha / 2);
  overflow: hidden;
  background: rgba(#000, .35);
  // border-radius: 50%;
  
  > div {
    position: absolute;
    width: $liquidsquare-alpha;
    height: $liquidsquare-alpha;
    animation: liquidsquare-alpha $liquidsquare-gamma linear infinite forwards;
    background: $color-alpha;
    
    &:nth-child(1) {
      top: -$liquidsquare-beta;
      left: -$liquidsquare-beta;
    }
      
    &:nth-child(2) {
      top: -$liquidsquare-beta;
      right: -$liquidsquare-beta;
    }
    
    &:nth-child(3) {
      bottom: -$liquidsquare-beta;
      right: -$liquidsquare-beta;
    }
      
    &:nth-child(4) {
      bottom: -$liquidsquare-beta;
      left: -$liquidsquare-beta;
    }
  }
}

@keyframes liquidsquare-alpha {
  0% {
    transform:rotate(0);
    background: $color-alpha;
  }
  
  25% {
    background: $color-beta;
  }
  
  50% {
    border-radius: 50%;
    background: $color-gamma;
  }
  
  75% {
    background: $color-delta;
  }
  
  100% {
    transform:rotate(360deg);
    background: $color-alpha;
  }
}
// ---------------========== win8 ================================== 
// http://codepen.io/janrubio/pen/DusIE?editors=110


// ------------------------- fourdots ------------- 
.uac-loader-fourdots {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  border-radius: 20px;
  animation: uac-loader-4dotsrotate 4s ease-in-out infinite;
  .uac-loader-dot {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
  }
  .uac-loader-red {
    background: #e7524e;
    -webkit-border-radius: 20px;
    animation: uac-firstcolor 1.05s ease-in-out infinite;
  }
  .uac-loader-blue {
    background: #00ade4;
    animation: uac-secondcolor 1.05s ease-in-out infinite;
  }
  .uac-loader-green {
    background: #71c458;
    -webkit-border-radius: 20px;
    animation: uac-thirdcolor 1.05s ease-in-out infinite;
  }
  .uac-loader-yellow {
    background: #fdc331;
    -webkit-border-radius: 20px;
    animation: uac-fourthcolor 1.05s ease-in-out infinite;
  }
}

/*-----Animations----*/
@keyframes uac-firstcolor {
  0% {
    z-index: 1;
  }
  50% {
    transform: translateX(24px);
  }
}
@keyframes uac-secondcolor {
  0% {
    z-index: 1;
  }
  50% {
    transform: translateX(-24px);
  }
}
@keyframes uac-thirdcolor {
  0% {
    z-index: 1;
  }
  50% {
    transform: translateY(-24px);
  }
}
@keyframes uac-fourthcolor {
  0% {
    z-index: 1;
  }
  50% {
    transform: translateY(24px);
  }
}

@keyframes uac-loader-4dotsrotate {
  0% {
    z-index: 1;
  }
  50% {
    transform: rotate(360deg);
  }
}
// ----------------------------- from http://tympanus.net/codrops
.uac-loader-bokeh {
    font-size: 100px;
    margin-left: -50px;
    width: 1em;
    height: 1em;
    position: relative;
    // margin: 100px auto;
    border-radius: 50%;
    border: .01em solid rgba(150,150,150,0.1);
    list-style: none;
}

.uac-loader-bokeh li {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 50%;
}

.uac-loader-bokeh li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.1em;
    background: #00C176;
    transform-origin: 50% 250%;
    animation: 
        uac-rota 1.13s linear infinite,
        uac-opa 3.67s ease-in-out infinite alternate;
}

.uac-loader-bokeh li:nth-child(2) {
    top: 50%; 
    right: 0;
    margin: -.1em 0 0 0;
    background: #FF003C;
    transform-origin: -150% 50%;
    animation: 
        uac-rota 1.86s linear infinite,
        uac-opa 4.29s ease-in-out infinite alternate;
}

.uac-loader-bokeh li:nth-child(3) {
    left: 50%; 
    bottom: 0;
    margin: 0 0 0 -.1em;
    background: #FABE28;
    transform-origin: 50% -150%;
    animation: 
        uac-rota 1.45s linear infinite,
        uac-opa 5.12s ease-in-out infinite alternate;
}

.uac-loader-bokeh li:nth-child(4) {
    top: 50%; 
    left: 0;
    margin: -.1em 0 0 0;
    background: #88C100;
    transform-origin: 250% 50%;
    animation: 
        uac-rota 1.72s linear infinite,
        uac-opa 5.25s ease-in-out infinite alternate;
}

@keyframes uac-rota {
    from { }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}


@keyframes uac-opa {
    0% { }
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

// -------------------- uac kiri-----
// http://codepen.io/hafizfattah/pen/AbBtc
.uac-loader-kiri{
    position: absolute;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    // line-height: 200px;
    // border-radius: 50%;
    // top: 50%;
    // left: 50%;
    // margin-left: -100px;
    // margin-top: -100px;
}
.uac-loader-kiri span{
  width:16px;
  height:16px;
  position:absolute;
  top: 50%;
  left: 50%;
  border-radius:50%;
  display:inline-block;
  margin-left:-10px;
  animation:3s infinite linear;
}

.uac-loader-kiri span:nth-child(1){
  background:#E84C3D;
  animation:kiri 1.2s infinite linear;
}
.uac-loader-kiri span:nth-child(2){
  background:#F1C40F;
  z-index:100;
}
.uac-loader-kiri span:nth-child(3){
  background:#2FCC71;
  animation:kanan 1.2s infinite linear;
}
@keyframes kanan {
    0% {transform:translateX(20px);
    }
   
  50%{transform:translateX(-20px);
  }
  
  100%{transform:translateX(20px);
  z-index:200;
  }
}

@keyframes kiri {
    0% {
      transform:translateX(-20px);
      z-index:200;
    }
    50%{
      transform:translateX(20px);
    }
    100%{
      transform:translateX(-20px);
    }
}
// ------------------ sail theme------------------
.uac-loader-sail {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -40px 0 0 -40px;
  // border-radius: 20px;
  // animation: uac-loader-4dotsrotate 4s ease-in-out infinite;
  &>span {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    // left: 50%;
    margin-top: -10px;
    margin-left: -10px;
  }
  &>span:nth-child(1) { //red
    background: $dot-red;
    left:0;
    animation: uac-sail-toRight 2s linear infinite;
  }
  &>span:nth-child(2) { //blue
    background: $dot-blue;
    left:25%;
    animation: uac-sail-toRight 2s linear infinite;
    animation-delay: -1.5s;
  }
  &>span:nth-child(3) { //green
    background: $dot-green;
    left:50%;
    animation: uac-sail-toRight 2s linear infinite;
    animation-delay: -1s;
  }
  &>span:nth-child(4) { // yellow
    background: $dot-yellow;
    left:75%;
    animation: uac-sail-toRight 2s linear infinite;
    animation-delay: -0.5s;
  }
}
@keyframes uac-sail-toRight{
  0%{
    left: 0;
    transform:scale(0.5);
    opacity:0;
  }
  25%{
    opacity:1;
    transform:scale(1);
  }
  75%{
    opacity:1;
    transform:scale(1);
  }
  100%{
    transform:scale(0.5);
    opacity:0;
    left:100%;
  }
}

// ------------------- breath --------
.uac-loader-breath {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  // animation: uac-loader-breath 2s cubic-bezier(0.59, 0.01, 0.52, 1.02) infinite;
  &>span {
    width: 100px;
    height: 100px;
    background-color: $dot-red;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    opacity:0.7;
    animation: uac-loader-breath-color 8s cubic-bezier(0.59, 0.01, 0.52, 1.02) infinite,
               uac-loader-breath 2s cubic-bezier(0.59, 0.01, 0.52, 1.02) infinite;
  }
  &>span:nth-child(2){
      animation-delay: 1s;
  }
}
@keyframes uac-loader-breath{
  0%{
    transform: scale(0);
  }
  50%{
    transform: scale(1);
  }
  100%{
    transform: scale(0);
  }
}
@keyframes uac-loader-breath-color{
  0%{
    background-color: $dot-red;
  }
  25%{
    background-color: $dot-blue;
  }
  50%{
    background-color: $dot-green;
  }
  75%{
    background-color: $dot-yellow;
  }
}
// ------------------------ http://codepen.io/The_Animator/pen/mpahL?editors=110
.uac-loader-flipdot{
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  .semicircle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    animation-fill-mode: both;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .semicircle .semicircle-inner {
    width: 40px;
    height: 20px;
    border-radius: 20px 20px 0 0;
    animation-fill-mode: both;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .semicircle.upper-base {
    animation-name: base-rotate;
  }
  .semicircle.upper-base .semicircle-inner {
    animation-name: upper-color;
  }
  .semicircle.upper-move {
    animation-name: upper-move;
  }
  .semicircle.upper-move .semicircle-inner {
    animation-name: lower-color-shadow;
  }
  .semicircle.lower-base {
    animation-name: base-rotate;
  }
  .semicircle.lower-base .semicircle-inner {
    border-radius: 0 0 20px 20px;
    margin-top: 20px;
    animation-name: lower-color;
  }
  .semicircle.lower-move {
    animation-name: lower-move;
  }
  .semicircle.lower-move .semicircle-inner {
    animation-name: upper-color-shadow;
  }
}

@keyframes upper-move {
  0% {
    transform: rotateX(360deg) rotate(0deg);
  }

  12.5% {
    transform: rotateX(270deg) rotate(0deg);
  }

  25% {
    transform: rotateX(270deg) rotate(0deg);
  }

  25.01% {
    transform: rotateY(90deg) rotate(270deg);
  }

  37.5% {
    transform: rotateY(90deg) rotate(270deg);
  }

  50% {
    transform: rotateY(0deg) rotate(270deg);
  }

  50.01% {
    transform: rotateX(180deg) rotate(0deg);
  }

  62.5% {
    transform: rotateX(270deg) rotate(0deg);
  }

  75% {
    transform: rotateX(270deg) rotate(0deg);
  }

  75.01% {
    transform: rotateY(270deg) rotate(90deg);
  }

  87.5% {
    transform: rotateY(270deg) rotate(90deg);
  }

  100% {
    transform: rotateY(360deg) rotate(90deg);
  }
}



@keyframes lower-move {
  0% {
    transform: rotateX(270deg) rotate(0deg);
  }

  12.5% {
    transform: rotateX(270deg) rotate(0deg);
  }

  25% {
    transform: rotateX(180deg) rotate(0deg);
  }

  25.01% {
    transform: rotateY(180deg) rotate(270deg);
  }

  37.5% {
    transform: rotateY(270deg) rotate(270deg);
  }
  50% {
    transform: rotateY(270deg) rotate(270deg);
  }

  50.01% {
    transform: rotateX(270deg) rotate(0deg);
  }

  62.5% {
    transform: rotateX(270deg) rotate(0deg);
  }

  75% {
    transform: rotateX(360deg) rotate(0deg);
  }

  75.01% {
    transform: rotateY(180deg) rotate(90deg);
  }

  87.5% {
    transform: rotateY(270deg) rotate(90deg);
  }

  100% {
    transform: rotateY(270deg) rotate(90deg);
  }
}


@keyframes base-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
  }
  25.01% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  50.01% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  75.01% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}



@keyframes upper-color {
  0% {
    background: #f52d27;
  }
  50% {
    background: #f52d27;
  }
  50.01% {
    background: #00b262;
  }
  100% {
    background: #00b262;
  }
}


@keyframes upper-color-shadow {
  0% {
    background: #7d0906;
  }
  25% {
    background: #f52d27;
  }
  50% {
    background: #7d0906;
  }
  50.01% {
    background: #00190e;
  }
  75% {
    background: #00b262;
  }
  100% {
    background: #00190e;
  }
}



@keyframes lower-color {
  0% {
    background: #3a71f8;
  }
  25% {
    background: #3a71f8;
  }
  25.01% {
    background: #ffd539;
  }
  75% {
    background: #ffd539;
  }
  75.01% {
    background: #3a71f8;
  }
  100% {
    background: #3a71f8;
  }
}

@keyframes lower-color-shadow {
  0% {
    background: #3a71f8;
  }
  25% {
    background: #052e94;
  }
  25.01% {
    background: #9f7d00;
  }
  50% {
    background: #ffd539;
  }
  75% {
    background: #9f7d00;
  }
  75.01% {
    background: #052e94;
  }
  100% {
    background: #3a71f8;
  }
}

// -----------------------------
