I'm happy today to share with you this set of 10 full css preloaders i've designed.
Theses spinners require only one html element. this html element also provides a nice fallback text for prehistoric browsers :
<div class="spinner">
Loading...
</div>
All the css properties are sized using ems, so to scale the size of theses loaders up or down, just change change the 'font-size' property
.spinner {
margin: 1em auto;
overflow: hidden;
font-size: 15px;
text-indent: -999em;
border-radius: 50%;
width: 10em;
height: 10em;
border: 1.1em solid rgba(0, 0, 0, 0.1);
border-bottom: 1.1em solid #000;
animation: spin1 1s infinite linear;
}
@keyframes spin1 {
100% {
transform: rotate(360deg);
}
}
.spinner {
font-size: 10px;
text-indent: -999em;
overflow: hidden;
width: 1em;
height: 1em;
margin: 10em auto;
border-radius: 50%;
animation: spin2 5s infinite ease-in;
}
@keyframes spin2 {
0%,90%,100% {
box-shadow: 6em 0em 0 1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 -1em #000000;
}
10%,80% {
box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 -1em #000000;
}
20%,70% {
box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 -1em #000000;
}
30%,60% {
box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 1em #000000, -10em 0em 0 -1em #000000;
}
40%,50% {
box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 1em #000000;
}
}
.spinner {
margin: 3em auto;
position: relative;
overflow: hidden;
font-size: 15px;
text-indent: -999em;
border-radius: 50%;
width: 10em;
height: 10em;
box-shadow: 0em 0.8em 0.3em #000;
animation: spin3 0.9s infinite linear;
}
@keyframes spin3 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
font-size: 10px;
text-indent: -999em;
overflow: hidden;
width: 4em;
height: 4em;
margin: 10em auto;
border-radius: 50%;
box-shadow: 0em -8em 0 -2em #000000, 6em -6em 0 -1em #000000, 8em 0em 0 0em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
animation: spin4 2s infinite linear;
}
@keyframes spin4 {
12.5% {
box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -2em #000000, 8em 0em 0 -1em #000000, 6em 6em 0 0em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
}
25% {
box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -2em #000000, 6em 6em 0 -1em #000000, 0em 8em 0 0em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
}
37.5% {
box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -2em #000000, 0em 8em 0 -1em #000000, -6em 6em 0 0em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
}
50% {
box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -2em #000000, -6em 6em 0 -1em #000000, -8em 0em 0 0em #000000, -6em -6em 0 -3em #000000;
}
62.5% {
box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -2em #000000, -8em 0em 0 -1em #000000, -6em -6em 0 0em #000000;
}
75% {
box-shadow: 0em -8em 0 0em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -2em #000000, -6em -6em 0 -1em #000000;
}
87.5% {
box-shadow: 0em -8em 0 -1em #000000, 6em -6em 0 0em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -2em #000000;
}
}
.spinner {
font-size: 10px;
text-indent: -999em;
overflow: hidden;
width: 1em;
height: 1em;
margin: 10em auto;
box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 1);
animation: spin5 2s infinite ease-in;
}
@keyframes spin5 {
10%,90% {
box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
}
20%,80% {
box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 1), -2em 0em 0 1em rgba(0, 0, 0, 1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
}
30%,70% {
box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 1), -2em 0em 0 1em rgba(0, 0, 0, 1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
}
40%,60% {
box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 1);
}
}
.spinner {
font-size: 17px;
text-indent: -999em;
position: relative;
border-radius: 48%;
overflow: hidden;
width: 0em;
height: 0em;
margin: 6em auto;
box-shadow: none;
animation: spin6 2s infinite linear;
}
@keyframes spin6 {
15% {
box-shadow: -1.5em -1.5em 0 0.2em green, -1.5em 1.5em 0 0.2em blue, 1.5em 1.5em 0 0.2em red, 1.5em -1.5em 0 0.2em yellow;
transform: rotate(0.25turn);
}
80% {
width: 10em;
height: 10em;
margin: 1em auto;
transform: rotate(2turn);
}
}
.spinner {
font-size: 10px;
text-indent: -999em;
overflow: hidden;
width: 4em;
height: 4em;
margin: 10em auto;
border-radius: 50%;
box-shadow: 0em -8em 0 0em #000000, 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
animation: spin7 2s infinite linear;
}
@keyframes spin7 {
12.5% {
box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em #000000, 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
}
25% {
box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em #000000, 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
}
37.5% {
box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em #000000, 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em #000000, -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
}
62.5% {
box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em #000000, -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
}
75% {
box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em #000000, -6em -6em 0 0em rgba(0, 0, 0, 0.1);
}
87.5% {
box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em #000000;
}
}
.spinner {
font-size: 15px;
text-indent: -999em;
position: relative;
border-radius: 48%;
overflow: hidden;
width: 10em;
height: 10em;
margin: 3em auto;
box-shadow: -0.8em -0.8em 0.1em 0.2em #000, -0.8em 0.8em 0.1em 0.2em #000, 0.8em 0.8em 0.1em 0.2em #000, 0.8em -0.8em 0.1em 0.2em #000;
animation: spin8 5s infinite linear;
}
@keyframes spin8 {
0% {
transform: rotate(0turn);
}
50% {
box-shadow: -0.4em -0.4em 0.1em 0.2em #000, -0.4em 0.4em 0.1em 0.2em #000, 0.4em 0.4em 0.1em 0.2em #000, 0.4em -0.4em 0.1em 0.2em #000;
}
100% {
transform: rotate(3turn);
}
}
.spinner {
font-size: 5px;
text-indent: -999em;
overflow: hidden;
width: 2em;
height: 2em;
margin: 19em auto;
border-radius: 50%;
box-shadow: -12.5em 0em 0em 2em rgba(0, 0, 0, 0.1), -7em 0em 0em 1em rgba(0, 0, 0, 0.1), -3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 7em 0em 0em 1em rgba(0, 0, 0, 0.1), 12.5em 0em 0em 2em rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.0);
animation: spin9 1s infinite ease;
}
@keyframes spin9 {
0% {
background-color: black;
}
25% {
box-shadow: -12.5em 0em 0em 2em rgba(0, 0, 0, 0.1), -7em 0em 0em 1em rgba(0, 0, 0, 0.1), -3em 0em 0em 0.5em black, 3em 0em 0em 0.5em black, 7em 0em 0em 1em rgba(0, 0, 0, 0.1), 12.5em 0em 0em 2em rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: -12.5em 0em 0em 2em rgba(0, 0, 0, 0.1), -7em 0em 0em 1em black, -3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 7em 0em 0em 1em black, 12.5em 0em 0em 2em rgba(0, 0, 0, 0.1);
}
75% {
box-shadow: -12.5em 0em 0em 2em black, -7em 0em 0em 1em rgba(0, 0, 0, 0.1), -3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 7em 0em 0em 1em rgba(0, 0, 0, 0.1), 12.5em 0em 0em 2em black;
}
100% {
}
}
.spinner {
margin: 4em auto;
overflow: hidden;
font-size: 10px;
text-indent: -999em;
border-radius: 50%;
width: 10em;
height: 10em;
border: 1.1em solid rgba(0, 0, 0, 0.2);
border-bottom: 1.1em solid #000;
border-top: 1.1em solid #000;
box-shadow: 0em 0em 0em 2em rgba(0, 0, 0, 0.2), -5em 0em 0em -4em black, 5em 0em 0em -4em black, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4);
animation: spin10 2s infinite linear;
}
@keyframes spin10 {
33%,66% {
box-shadow: 0em 0em 0em 2em rgba(0, 0, 0, 0.2), -5em 0em 0em -4em red, 5em 0em 0em -4em red, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4);
}
23%,43%,56%,76% {
box-shadow: 0em 0em 0em 2em rgba(0, 0, 0, 0.2), -5em 0em 0em -4em black, 5em 0em 0em -4em black, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4);
}
100% {
transform: rotate(360deg);
}
}
Feel free to use this css scripts for your projects or any purpose. If you would like to provide credits, please link it to this article.
Chtiwi Malek on Google+About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.