.spinner1{width:40px;height:40px;position:relative;}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#cbb27c;opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2.0s infinite ease-in-out;animation:bounce 2.0s infinite ease-in-out;}.double-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframes bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}50%{transform:scale(1.0);-webkit-transform:scale(1.0);}}.spinner2{width:40px;height:40px;position:relative;}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#fff;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;}.spinner2 .spinner-container{position:absolute;width:100%;height:100%;}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}.circle1{top:0;left:0;}.circle2{top:0;right:0;}.circle3{right:0;bottom:0;}.circle4{left:0;bottom:0;}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}40%{transform:scale(1.0);-webkit-transform:scale(1.0);}}.spinner3{width:40px;height:40px;position:relative;-webkit-animation:rotate 2.0s infinite linear;animation:rotate 2.0s infinite linear;}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#fff;border-radius:100%;-webkit-animation:bounce 2.0s infinite ease-in-out;animation:bounce 2.0s infinite ease-in-out;}.dot2{top:auto;bottom:0px;-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframes bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}50%{transform:scale(1.0);-webkit-transform:scale(1.0);}}.spinner4{width:30px;height:30px;background-color:#fff;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out;}@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}}.spinner5{width:32px;height:32px;position:relative;}.cube1,.cube2{background-color:#fff;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:cubemove 1.8s infinite ease-in-out;animation:cubemove 1.8s infinite ease-in-out;}.cube2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}@-webkit-keyframes cubemove{25%{-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}50%{-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}100%{-webkit-transform:rotate(-360deg)}}@keyframes cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(0.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5);}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg);}50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

.spinner6 {
  width: 50px;
  height: 30px;
  text-align: center;
}

.spinner6 > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  margin-left:2px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner6 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner6 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner6 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner6 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
  .spinner7 {
      width: 90px;
      height: 30px;
      text-align: center;
    }

    .spinner7 > div {
      background-color: #fff;
      height: 15px;
      width: 15px;
      margin-left:3px;
      border-radius: 50%;
      display: inline-block;
      
      -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
      animation: stretchdelay 0.7s infinite ease-in-out;
    }

    .spinner7 .circ2 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .spinner7 .circ3 {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }

    .spinner7 .circ4 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .spinner7 .circ5 {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    @-webkit-keyframes stretchdelay {
      0%, 40%, 100% { -webkit-transform: translateY(-10px) }  
      20% { -webkit-transform: translateY(-20px) }
    }

    @keyframes stretchdelay {
      0%, 40%, 100% { 
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
      } 20% {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
      }
    }