Create Loader Animation with CSS
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Loader Animation with CSS</title>
<style type="text/css">
h2{font-size: 33px;margin-bottom: 10px;}
.loader {
border-top: 16px solid #4285F4;
border-right: 16px solid #EA4335;
border-bottom: 16px solid #FBBC05;
border-left: 16px solid #34A853;
border-radius: 50%;
width: 80px;
height: 80px;
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.loader-container {
border: 1px solid rgba(255, 255, 255, 0.2);
width: 240px;
height: 240px;
float: left;
position: relative;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.loader2, .loader2:before, .loader2:after {
background: #000000;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader2 {
color: #000000;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader2:before, .loader2:after {
position: absolute;
top: 0;
content: '';
}
.loader2:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader2:after {
left: 1.5em;
}
@-webkit-keyframes animate {
0%, 80%, 100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes animate {
0%, 80%, 100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="">
<h2>Loader Style 1</h2>
<div class="loader"></div>
<h2 style="margin-bottom:0px;">Loader Style 2</h2>
<div class="loader-container">
<div class="loader2"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
