/*
Simple mini-loading bar
Working on: https://jsfiddle.net/alexlatorre/xe1tn9kh/1/
*/
<span class="loading"></span>
.loading {
width: 250px;
display: block;
height: 2px;
margin: 0px auto;
border-radius: 2px;
background-color: #cfcfcf;
position: relative;
overflow: hidden;
z-index: 1;
}
.loading:before {
content:'';
height: 3px;
width: 68px;
position: absolute;
-webkit-transform: translate(-34px, 0);
-ms-transform: translate(-34px, 0);
transform: translate(-34px, 0);
background-color: #3b4a5e;
border-radius: 2px;
-webkit-animation: initial-loading 1.5s infinite ease;
animation: animation 1.6s infinite ease;
}
@-webkit-keyframes animation {
0% {
left: 0
}
50% {
left: 100%
}
100% {
left: 0
}
}
@keyframes animation {
0% {
left: 0
}
50% {
left: 100%
}
100% {
left: 0
}
}