Loading Animation using CSS3 Keyframe Animation

Introduction

CSS3 Keyframes are great for creating anything from complex, multi-step animations to simple looping animations. Loading animations are a necessity for demonstrating to the user that they need to wait while also being easy on the eyes. A cool loading animation could keep a user interested. This loading animation is inspired by the Xbox loading animation.

Please Note: Support for keyframes is still patchy. Check out an updated index of which browsers are supported: CanIuse

HTML

I made this particular animation three rings but you can add as many as you want. To make each ring I nest divs within each other.

    <div class="loading">
      <div class="loading-medium">
        <div class="loading-small"></div>
      </div>
    </div>   

CSS

This is the css for the structure of each ring I make the border of the ring 5px wide. By decreasing the border radius of each consecutive inner ring by 20px it gives a nice even buffer. The animation calls our custom Keyframe animation

.loading { /* Outer Ring */
  margin: 100px auto;
  width: 95px;
  height: 95px;
  border-right: 5px solid #fff;
  border-top: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  
  /* call rotate animation */
  -webkit-animation: rotate 2s linear 0 infinite normal;
  -moz-animation: rotate 2s linear 0s infinite normal;
  -o-animation: rotate 2s linear 0 infinite normal;
  -ms-animation: rotate 2s linear 0 infinite normal;
  animation: rotate 2s linear 0 infinite normal;
  
}
  .loading-medium { /* Middle Ring */
    margin: 15px auto;
    display: block;
    width: 75px;
    height: 55px;
    border-right: 5px solid #fff;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-radius: 80px;
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;    
    
    /* call rotate animation */
    -webkit-animation: rotate 2s linear 0 infinite normal;
    -moz-animation: rotate 2s linear 0s infinite normal;
    -o-animation: rotate 2s linear 0 infinite normal;
    -ms-animation: rotate 2s linear 0 infinite normal;
    animation: rotate 2s linear 0 infinite normal;
    
  }
    .loading-small { /* Inner Ring */
      margin: 15px auto;
      display: block;
      width: 55px;
      height: 15px;
      border-right: 5px solid #fff;
      border-top: 5px solid transparent;
      border-left: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-radius: 60px;
      -moz-border-radius: 60px;
      -webkit-border-radius: 60px;    
      
      /* call rotate animation */
      -webkit-animation: rotate 2s linear 0 infinite normal;
      -moz-animation: rotate 2s linear 0s infinite normal;
      -o-animation: rotate 2s linear 0 infinite normal;
      -ms-animation: rotate 2s linear 0 infinite normal;
      animation: rotate 2s linear 0 infinite normal;
    }

Here is the keyframe animation code:

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to { 
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to { 
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to { 
    -ms-transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

Conclusion

Because the divs are nested within each other. Applying the same rotate animation on each layer gives us the desired of effect of having the inner ring going 3x the speed as the outer, the middle ring going 2x the speed as the outer. This gives it a cool unsyncing to syncing effect where the rings line up every so often.

If you need help on the CSS Keyframe syntax check out this great resource by CSS-tricks: Keyframe Animation Syntax

The post Loading Animation using CSS3 Keyframe Animation appeared first on webdesigncrowd.com.