The famous and eye pleasing design of Google has took over and the designs of Google is getting better and better, recently Google made changes to it's Gmails homepage and the loading page and the most amazing design was of the loading bar, the blue loading bar with moving image in it makes it look more professional, now let's see how to make it.
Remember that i am only going to show how to make such design with CSS, the rest of the JavaScript coding should be done by you or someone else, i am just showing how to design it.
There's two parts to make this design, the first is a </div> element and the other is CSS style which is required to make the design. The CSS codes can be customized but only play with it of you have knowledge about it.
First of all create a div element, class attribute's value should be same on both HTML div element and CSS styles.
<div class='loading-bar'></div>
So this is the HTML for the loading bar, if you are sure how to use it dynamically to sync with a loading event then you might just add the CSS by classing it. Your HTML may differ as on your needs but CSS should match the class name.
Now the most important part of the tutorial to make it really work, you are allowed to modify the CSS if you are sure about what you are doing or might just leave it. But to create a bar like exactly you want, you have to make changes, so i will tell what changes can you make in the CSS.
.myname
{
color: white;
border: 1px solid gainsboro;
border: 1px solid rgba(0, 0, 0, 0.1);
text-transform:uppercase;
padding:10px;
width:600px;
text-align:center;
text-shadow:1px 1px white;
font-size:18px;
cursor:pointer;
-webkit-transition:all 0.8s;
-ms-transition:all 0.8s;
-moz-transition:all 0.8s;
-o-transition:all 0.8s;
transition:all 0.8s;
height: 100%;
background-color: #6188F5;
background-repeat: repeat-x;
background-position: 8px 0px;
background-size: 40px 20px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-animation: pb 0.8s linear 0 infinite;
-ms-animation: pb 0.8s linear 0 infinite;
-o-animation: pb 0.8s linear 0 infinite;
-moz-animation: pb 0.8s linear 0 infinite;
}
@-webkit-keyframes pb { 0% { background-position:8px 0px; } 100% { background-position:120px 0; } }
@-ms-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-moz-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-o-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
So for your ease we have updated this on JSFiddle , just find it on the Demo Link, play with the CSS code there and if you find something better then please comment.
