<h1>Pure CSS loader single element</h1>
<div class="loader"></div> @import url(https://fonts.googleapis.com/css?family=Open+Sans);
.loader{
position:relative;
margin:20px auto;
width:247px;
height:30px;
animation:1s load infinite;
}
@keyframes load{
11%{
background-image: linear-gradient(90deg, black 30px, transparent 0, transparent 31px, transparent 0,
transparent 61px, transparent 0, transparent 62px, rgba(0,0,0,.14) 0,
rgba(0,0,0,.14) 92px, transparent 0, transparent 93px, rgba(0,0,0,.28) 0,
rgba(0,0,0,.28) 123px, transparent 0, transparent 124px, rgba(0,0,0,.42) 0,
rgba(0,0,0,.42) 154px, transparent 0, transparent 155px, rgba(0,0,0,.56) 0,
rgba(0,0,0,.56) 185px, transparent 0, transparent 186px, rgba(0,0,0,.7) 0,
rgba(0,0,0,.7) 216px, transparent 0, transparent 217px, rgba(0,0,0,.84) 0);
}
22%{
background-image: linear-gradient(90deg, rgba(0,0,0,.84) 30px, transparent 0, transparent 31px, black 0,
black 61px, transparent 0, transparent 62px, transparent 0,
transparent 92px, transparent 0, transparent 93px, rgba(0,0,0,.14) 0,
rgba(0,0,0,.14) 123px, transparent 0, transparent 124px, rgba(0,0,0,.28) 0,
rgba(0,0,0,.28) 154px, transparent 0, transparent 155px, rgba(0,0,0,.42) 0,
rgba(0,0,0,.42) 185px, transparent 0, transparent 186px, rgba(0,0,0,.56) 0,
rgba(0,0,0,.56) 216px, transparent 0, transparent 217px, rgba(0,0,0,.7) 0);
}
33%{
background-image: linear-gradient(90deg, rgba(0,0,0,.7) 30px, transparent 0, transparent 31px, rgba(0,0,0,.84) 0,
rgba(0,0,0,.84) 61px, transparent 0, transparent 62px, black 0,
black 92px, transparent 0, transparent 93px, transparent 0,
transparent 123px, transparent 0, transparent 124px, rgba(0,0,0,.14) 0,
rgba(0,0,0,.14) 154px, transparent 0, transparent 155px, rgba(0,0,0,.28) 0,
rgba(0,0,0,.28) 185px, transparent 0, transparent 186px, rgba(0,0,0,.42) 0,
rgba(0,0,0,.42) 216px, transparent 0, transparent 217px, rgba(0,0,0,.56) 0);
}
44%{
background-image: linear-gradient(90deg, rgba(0,0,0,.56) 30px, transparent 0, transparent 31px, rgba(0,0,0,.7) 0,
rgba(0,0,0,.7) 61px, transparent 0, transparent 62px, rgba(0,0,0,.84) 0,
rgba(0,0,0,.84) 92px, transparent 0, transparent 93px, black 0,
black 123px, transparent 0, transparent 124px, transparent 0,
transparent 154px, transparent 0, transparent 155px, rgba(0,0,0,.14) 0,
rgba(0,0,0,.14) 185px, transparent 0, transparent 186px, rgba(0,0,0,.28) 0,
rgba(0,0,0,.28) 216px, transparent 0, transparent 217px, rgba(0,0,0,.42) 0);
}
55%{
background-image: linear-gradient(90deg, rgba(0,0,0,.42) 30px, transparent 0, transparent 31px, rgba(0,0,0,.56) 0,
rgba(0,0,0,.56) 61px, transparent 0, transparent 62px, rgba(0,0,0,.7) 0,
rgba(0,0,0,.7) 92px, transparent 0, transparent 93px, rgba(0,0,0,.84) 0,
rgba(0,0,0,.84) 123px, transparent 0, transparent 124px, black 0,
black 154px, transparent 0, transparent 155px, transparent 0,
transparent 185px, transparent 0, transparent 186px, rgba(0,0,0,.14) 0,
rgba(0,0,0,.14) 216px, transparent 0, transparent 217px, rgba(0,0,0,.28) 0);
}
66%{
background-image: linear-gradient(90deg, rgba(0,0,0,.28) 30px, transparent 0, transparent 31px, rgba(0,0,0,.42) 0,
rgba(0,0,0,.42) 61px, transparent 0, transparent 62px, rgba(0,0,0,.56) 0,
rgba(0,0,0,.56) 92px, transparent 0, transparent 93px, rgba(0,0,0,.7) 0,
rgba(0,0,0,.7) 123px, transparent 0, transparent 124px, rgba(0,0,0,.84) 0,
rgba(0,0,0,.84) 154px, transparent 0, transparent 155px, black 0,
black 185px, transparent 0, transparent 186px, transparent 0,
transparent 216px, transparent 0, transparent 217px, rgba(0,0,0,.14) 0);
}
77%{
background-image: linear-gradient(90deg, rgba(0,0,0,.14) 30px, transparent 0, transparent 31px, rgba(0,0,0,.28) 0,
rgba(0,0,0,.28) 61px, transparent 0, transparent 62px, rgba(0,0,0,.42) 0,
rgba(0,0,0,.42) 92px, transparent 0, transparent 93px, rgba(0,0,0,.56) 0,
rgba(0,0,0,.56) 123px, transparent 0, transparent 124px, rgba(0,0,0,.7) 0,
rgba(0,0,0,.7) 154px, transparent 0, transparent 155px, rgba(0,0,0,.84) 0,
rgba(0,0,0,.84) 185px, transparent 0, transparent 186px, black 0,
black 216px, transparent 0, transparent 217px, transparent 0);
}
88%{
background-image: linear-gradient(90deg, transparent 30px, transparent 0, transparent 31px, rgba(0,0,0,.14) 0,
rgba(0,0,0,.14) 61px, transparent 0, transparent 62px, rgba(0,0,0,.28) 0,
rgba(0,0,0,.28) 92px, transparent 0, transparent 93px, rgba(0,0,0,.42) 0,
rgba(0,0,0,.42) 123px, transparent 0, transparent 124px, rgba(0,0,0,.56) 0,
rgba(0,0,0,.56) 154px, transparent 0, transparent 155px, rgba(0,0,0,.7) 0,
rgba(0,0,0,.7) 185px, transparent 0, transparent 186px, rgba(0,0,0,.84) 0,
rgba(0,0,0,.84) 216px, transparent 0, transparent 217px, black 0);
}
100%{
background-image: linear-gradient(90deg, transparent 30px, transparent 0, transparent 31px, transparent 0,
transparent 61px, transparent 0, transparent 62px, rgba(0,0,0,.14) 0,
rgba(0,0,0,.14) 92px, transparent 0, transparent 93px, rgba(0,0,0,.28) 0,
rgba(0,0,0,.28) 123px, transparent 0, transparent 124px, rgba(0,0,0,.42) 0,
rgba(0,0,0,.42) 154px, transparent 0, transparent 155px, rgba(0,0,0,.56) 0,
rgba(0,0,0,.56) 185px, transparent 0, transparent 186px, rgba(0,0,0,.7) 0,
rgba(0,0,0,.7) 216px, transparent 0, transparent 217px, rgba(0,0,0,.84) 0);
}
}
body{
font-family:"Open Sans", sans-serif;
}
h1{
text-align:center;
}/*
Inspired by CSSLoad.net
*/
External CSS
This Pen doesn't use any external CSS resources.