Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 Spinning Loader

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 372
    Comment on it

    Hello Readers, here is a small blog on  spinning loader, when we visit any website we have seen loader at the time of loading website. these preloaders are the visual feedback while the content is being loaded. In this example, I have taken  divs having same class "circle-block" and gave them same width and height, position relative, animation-name, animation-duration, animation-timing-function but different animation-delay according to the requirement.

     

    First, we will write the  code to achieve the same:

    <div class="container-block">
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
      <div class="circle-block"></div>
    
    </div>

     

    Now we will write the CSS code:

    body
    
    {
      background: #fff68f;
    }
    
    
    .container-block
    
    {
      width: 80px;
      height: 100px;
      margin: 100px auto;
      margin-top: calc(100vh / 2 - 50px);
    
    }
    
    
    .circle-block
    
    {
      position: relative;
      box-sizing: border-box;
      float: left;
      margin: 0 10px 10px 0;
      width: 12px;
      height: 12px;
      background: #ff00a7;
      border-radius:8px;
    }
    
    
    .circle-block:nth-child(4n+1) { animation: wave 2s ease .0s infinite; }
    .circle-block:nth-child(4n+2) { animation: wave 2s ease .2s infinite; }
    .circle-block:nth-child(4n+3) { animation: wave 2s ease .4s infinite; }
    .circle-block:nth-child(4n+4) { animation: wave 2s ease .6s infinite; margin-right: 0; }
    
    
    @keyframes wave
    
    {
      0%   { top: 0;     opacity: 1; }
      50%  { top: 30px;  opacity: .2; }
      100% { top: 0;     opacity: 1; }
    }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: