flying dollars

flying dollars

by Pavlo

HTML

<div class="" style="margin-top:35%;font-size: 18px;font-weight:bold;color:#aaa;">
        <center><!--Loading please wait...<br/><br/>-->
        <div class="spinner">
        <img class="dot1"/>
        <img class="dot2"/>
        <img class="dot3"/>
        <img class="dot4"/>
        </div>
        </center>
    </div>

CSS

.rotate {   
        -webkit-animation:spin 1s linear infinite;
        -moz-animation:spin 1s linear infinite;
        animation:spin 1s linear infinite;
        opacity:1;
        
      }
      
      .bounce {
        /*animation: bounce 2s cubic-bezier(0.5,1,0,1) infinite;*/
        animation: bounce 2s infinite;
      }
    @-moz-keyframes spin { 
        0% { -moz-transform: rotate(360deg);} 
        50% { -moz-transform: rotate(180deg);} 
        100% { -moz-transform: rotate(0deg);} 
    }
    @-webkit-keyframes spin { 
        0% { -webkit-transform: rotate(360deg);} 
        50% { -webkit-transform: rotate(180deg);} 
        100% { -webkit-transform: rotate(0deg);} 
    }
    
    @keyframes spin { 
        0% { transform: rotate(360deg);} 
        50% { transform: rotate(180deg);} 
        100% { transform:rotate(0deg);} 
    }        
    
    @keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 
 10% {transform: translateY(-400px);}
 40% {transform: translateY(-150px);}
 60% {transform: translateY(-100px);}
 90% {transform: translateY(-50px);}
}

.spinner {
  margin: 100px auto;
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  color: #eee;
  -webkit-animation: sk-rotate 4s infinite linear;
  animation: sk-rotate 4s infinite linear;
  
}

.dot1, .dot2, .dot3, .dot4 {
  width: 50%;
  height: 50%;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  /*background-color: #333;*/
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 4s infinite linear;
  animation: sk-bounce 4s infinite linear;
  
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.dot3 {
  top: auto;
  bottom: 0;
  left: 0;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}
.dot4 {
  right:auto;
  left: 0px;
  top: 0px;
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes...

JavaScript

var imgSrc =...