Single Element CSS Spinners
What is it?
Single Element CSS Spinners is a collection of loading animations made in css only, so no need for images or svg or any additional items, just one element added to you html and styled in CSS.
Each spinner consists of a single div
with a class of loader
and content text of "Loading...". The text is for screen readers and can be used as a fallback state for older browsers.
Preview
a preview of Single Element CSS Spinners
What can i use this for?
You can select a loader and copy the div element and loader css and include it in your website, in place of a animated gif or the text loading.
Conclusion
Check out the original demo page below and it has a selection of about 8 css loaders that you can choose to embed in your site. If you dont like the demo included here.
Original Source
You can check out the original demo page here.
Single Element CSS Spinners Demo
View Demo Full Screen View Demo New Tab
Single Element CSS Spinners Code
HTML
<div class="loader">Loading...</div>
CSS
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
External Link for Single Element CSS Spinners