"G-mail animation"
Bootstrap 4.1.1 Snippet by kumarroshanjha

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>G-mail Animation</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <style>*{ margin: 0; padding: 0; font-family: arial; } body{ margin: 0; padding: 0; text-align: center; /*background-color: red;*/ } .container{ width: 100%; height: 100%; /*background-color: red;*/ position: relative; } .box1{ width: 170px; height: 125px; position: absolute; background-color: #b0b0b0; top: 100px; left: 40%; animation: animate 5s infinite; animation-delay: 3s; display: block; z-index: 2; overflow: hidden; } @keyframes animate{ 0%{ width: 170px; height: 125px; display: inline-block; } 15%{ width: 220px; height: 175px; display: inline-block; } 100%{ width: 220px; height: 175px; display: inline-block; } } .box1 img{ width: 250px; height: 225px; position: absolute; top: -50px; left: -23%; z-index: 4; animation: animeone 5s infinite; animation-delay: 3s; } @keyframes animeone{ 0%{ width: 250px; height: 225px; top: -50px; left: -23%; } 15%{ width: 320px; height: 320px; top: -71px; left: -23%; } 100%{ width: 320px; height: 320px; top: -71px; left: -23%; } } .overlay{ width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; /*background-color: #d54c3f;*/ z-index: 3; animation: animetwo 5s infinite; animation-delay: 3s; } @keyframes animetwo{ 0%{ width: 0%; height: 0%; background-color: #d54c3f; } 15%{ transform: scale(10); background-color: #d54c3f; } 25%{ transform: scale(100); background-color: #d54c3f; } 100%{ transform: scale(100); background-color: #d54c3f; } } .box2{ width: 5px; height: 5px; background-color: #eee; position: absolute; z-index: 1; left: 50%; top: 150px; border-radius: 50%; animation: animethree 5s infinite; animation-delay: 3s; /* display: none; */ } @keyframes animethree{ 0%{ transform: scale(0); display: inline; background-color: #eee; } 5%{ transform: scale(100); display: inline; background-color: #eee; } 25%{ transform: scale(200); display: inline; background-color: white; } 100%{ transform: scale(200); display: inline; background-color: white; } } .container h1{ position: absolute; left: 44%; z-index: 5; top: 380px; color: #00000069; animation: animefive 5s infinite; animation-delay: 3s; } @keyframes animefive{ 0%{ color: #00000069; } 50%{ color: black; } 100%{ color: black; } } .box3{ position: absolute; width: 200px; height: 5px; left: 41%; background-color: #eee; z-index: 6; top: 370px; overflow: hidden; } .overlay2{ width: 100%; height: 100%; background-color: red; position: absolute; left: -100%; animation: animefour 5s infinite; animation-delay: 3s; } @keyframes animefour{ 0%{ left: -100%; } 15%{ left: 0%; } 100%{ left: 0; } }</style> </head> <body> <div class="container"> <div class="box1"> <img href="https://files.fm/u/gs6f8exd"> <div class="overlay"></div> </div> <div class="box2"> </div> <div class="box3"> <div class="overlay2">s</div> </div> <h1>LOADING</h1> </div> </body> </html>

Related: See More

Now UI Kit
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: