All the animation effects are controlled by Keyframes Rule. Here we have used two keyframes, which provides you smooth animation effect.





keyframes loading :

This keyframes rule provides smooth transitions between two or more specified colors (Dark and Light Blue color) with help of CSS linear-gradient attribute. In another word it provides animation effect between two colors from left to right.

.loader-gmail { position: relative; border: 1px solid #a4a4a4; width: 320px; height: 8px; background-image: linear-gradient(135deg, #6187f2 0%, #6187f2 25%, #5679da 25%, #5679da 50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%); background-repeat: repeat; background-position: 0px 0px; background-size: 16px 16px; background-clip: content-box; padding: 1px; animation: loading 1s linear infinite; } @keyframes loading { from { background-position: 0px 0px; } to { background-position: -16px 0px; } }





keyframes progress-bar :

This keyframes rule provides a progress bar movement effect from left to right. ( i.e move the blue color div from 0% to 100%)

.loader-gmail:after { position: absolute; right: 0; height: 9px; background: rgb(245,245,245); z-index: 20; animation: progress-bar 4s linear infinite; content: '' ; } @keyframes progress-bar { 0% { width: 100%; } 30% { width: 80%; } 50% { width: 65%; } 69% { width: 20%; } 85% { width: 10; } 100% { width: 0; } }

lets see the complete example for gmail loading animation :



index.html

Display the gmail like animation effect.

<html> <head> <link rel= "stylesheet" type= "text/css" href= "animation-style.css" > </head> <body> <div style= "margin:170px auto; width:500px;" > <b>Loading skptricks@gmail.com</b> <div class= "loader-gmail" ></div> </div> </body> </html>

animation-style.css

This stylesheet provides a smooth animation from left to right.

.loader-gmail { position: relative; border: 1px solid #a4a4a4; width: 320px; height: 8px; background-image: linear-gradient(135deg, #6187f2 0%, #6187f2 25%, #5679da 25%, #5679da 50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%); background-repeat: repeat; background-position: 0px 0px; background-size: 16px 16px; background-clip: content-box; padding: 1px; animation: loading 1s linear infinite; } .loader-gmail:after { position: absolute; right: 0; height: 9px; background: rgb(245,245,245); z-index: 20; animation: progress-bar 4s linear infinite; content: '' ; } @keyframes loading { from { background-position: 0px 0px; } to { background-position: -16px 0px; } } @keyframes progress-bar { 0% { width: 100%; } 30% { width: 80%; } 50% { width: 65%; } 69% { width: 20%; } 85% { width: 10; } 100% { width: 0; } }

Video Link :





Download Code :

https://github.com/skptricks/php-Tutorials/tree/master/Gmail%20Like%20Loading%20Animation%20Using%20CSS3



This is all about gmail like progress loading animation effect. In case you have any queries please do comments in comment box below.



This stylesheet provides a smooth animation from left to right.This is all about. In case you have any queries please do comments in comment box below. This keyframes rule provides a progress bar movement effect from left to right. ( i.e move the blue color div from 0% to 100%)Display the gmail like animation effect.

In this post, We are going to provide a small example and source code for "". For displaying loading and animation effect , CSS3 Plays a most important role over here.