Modern Google Loader in Pure CSS

Hi, friends in this tutorial I show you modern google loader in pure CSS. Modern google loader animating through four colors. Using keyframes the animation works. So based on first-child & nth-child we creating animation. The transform is used to changing position and div tags are useful to show the four colors, Using this we going to create the loader.

google_loading.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Loading</title>
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<style>
body{
 background-color:#FFF;
}
h1{
 font-family:'Montserrat', sans-serif;
 font-size: 4em;
 text-align:center;
 letter-spacing: -10px;
 font-weight: lighter;
}
h1 span:first-child{
 color:#4285f4;
}
h1 span:nth-child(2){
 color: #db4437;
}
h1 span:nth-child(3){
 color:#f4b400;
}
h1 span:nth-child(4){
 color:#4285f4;
}
h1 span:nth-child(5){
 color:#0f9d58;
}
h1 span:nth-child(6){
 color: #db4437;
 -ms-transform: rotate(-20deg);
 -webkit-transform:rotate(-20deg);
 transform:rotate(-20deg);
 display: inline-block;
}
.loading{
 display: block;
 width: 122px;
 margin: 100px auto;
}
div{
 height: 20px;
 width:20px;
 position:absolute;
 border-radius:50%;
 background: #000;
 display: inline-block;
}
div:first-child{
 animation: move 1s ease-in-out infinite alternate;
 background: #4285f4;
 margin-left: 0;
}
div:nth-child(2){
 animation: move 1s ease-in-out -0.25s infinite alternate;
 margin-left: 35px;
 background:#db4437;
}
div:nth-child(3){
 animation: move 1s ease-in-out -0.5s infinite alternate;
 margin-left: 70px;
 background:#f4b400;
}
div:nth-child(4){
 animation: move 1s ease-in-out -0.75s infinite alternate;
 margin-left: 105px;
 background:#0f9d58;
}
@-moz-keyframes move{
 0%{
 transform: translateY(-10px);
 }
 100%{
 transform: translateY(5px);
 }
}
@-webkit-keyframes move{
 0%{
 transform: translateY(-10px);
 }
 100%{
 transform: translateY(5px);
 }
}
@-o-keyframes move{
 0%{
 transform: translateY(-10px);
 }
 100%{
 transform: translateY(5px);
 }
}
@keyframes move{
 0%{
 transform: translateY(-10px);
 }
 100%{
 transform: translateY(5px);
 }
}
</style>
</head>
<body>
<h1>
 <span>G</span>
 <span>o</span>
 <span>o</span>
 <span>g</span>
 <span>l</span>
 <span>e</span>
</h1>
<span class="loading">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</span>
</body>
</html>

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

Leave a Reply

Your email address will not be published. Required fields are marked *