Thursday, January 11, 2018

Gmail Like Loading Animation Using CSS3

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

All the animation effects are controlled 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.

No comments:

Post a Comment