Thursday, January 11, 2018

Skptricks CSS html html5 web development Gmail Like Loading Animation Using CSS3

Gmail Like Loading Animation Using CSS3

by on January 11, 2018 in , , ,
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 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.

By at
Tags: , , ,

1 comment:

  1. Bryan MatthewMarch 23, 2020 at 6:49 AM

    how to make it redirects to another site after the loading has finished?

    ReplyDelete

Subscribe to: Post Comments (Atom)