Loading Animation
Posted in
4356
10:41 pm, February 7, 2022
Pure CSS Loading Spinner
If you are tired of using an animated gif or loading the whole font awesome library just to get an animated loader image then this is the css library for you.
Just include the following CSS and then the ispinner html, and its ready to go, no images required its all in pure CSS.
Pure CSS Loading Spinner Demo
View Demo Full Screen View Demo New Tab
Pure CSS Loading Spinner Code
HTML
<!-- style: medium -->
<div class="ispinner">
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
</div>
<!-- style: large -->
<div class="ispinner ispinner-large">
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
</div>CSS
.ispinner {
position: relative;
width: 20px;
height: 20px; }
.ispinner .ispinner-blade {
position: absolute;
top: 6.5px;
left: 8.5px;
width: 2.5px;
height: 6.5px;
background-color: #8e8e93;
border-radius: 1.25px;
-webkit-animation: iSpinnerBlade 1s linear infinite;
animation: iSpinnerBlade 1s linear infinite;
will-change: opacity; }
.ispinner .ispinner-blade:nth-child(1) {
-webkit-transform: rotate(45deg) translateY(-6.5px);
transform: rotate(45deg) translateY(-6.5px);
-webkit-animation-delay: -1.625s;
animation-delay: -1.625s; }
.ispinner .ispinner-blade:nth-child(2) {
-webkit-transform: rotate(90deg) translateY(-6.5px);
transform: rotate(90deg) translateY(-6.5px);
-webkit-animation-delay: -1.5s;
animation-delay: -1.5s; }
.ispinner .ispinner-blade:nth-child(3) {
-webkit-transform: rotate(135deg) translateY(-6.5px);
transform: rotate(135deg) translateY(-6.5px);
-webkit-animation-delay: -1.375s;
animation-delay: -1.375s; }
.ispinner .ispinner-blade:nth-child(4) {
-webkit-transform: rotate(180deg) translateY(-6.5px);
transform: rotate(180deg) translateY(-6.5px);
-webkit-animation-delay: -1.25s;
animation-delay: -1.25s; }
.ispinner .ispinner-blade:nth-child(5) {
-webkit-transform: rotate(225deg) translateY(-6.5px);
transform: rotate(225deg) translateY(-6.5px);
-webkit-animation-delay: -1.125s;
animation-delay: -1.125s; }
.ispinner .ispinner-blade:nth-child(6) {
-webkit-transform: rotate(270deg) translateY(-6.5px);
transform: rotate(270deg) translateY(-6.5px);
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.ispinner .ispinner-blade:nth-child(7) {
-webkit-transform: rotate(315deg) translateY(-6.5px);
transform: rotate(315deg) translateY(-6.5px);
-webkit-animation-delay: -0.875s;
animation-delay: -0.875s; }
.ispinner .ispinner-blade:nth-child(8) {
-webkit-transform: rotate(360deg) translateY(-6.5px);
transform: rotate(360deg) translateY(-6.5px);
-webkit-animation-delay: -0.75s;
animation-delay: -0.75s; }
.ispinner.ispinner-large {
width: 35px;
height: 35px; }
.ispinner.ispinner-large .ispinner-blade {
top: 11.5px;
left: 15px;
width: 5px;
height: 12px;
border-radius: 2.5px; }
.ispinner.ispinner-large .ispinner-blade:nth-child(1) {
-webkit-transform: rotate(45deg) translateY(-11.5px);
transform: rotate(45deg) translateY(-11.5px); }
.ispinner.ispinner-large .ispinner-blade:nth-child(2) {
-webkit-transform: rotate(90deg) translateY(-11.5px);
transform: rotate(90deg) translateY(-11.5px); }
.ispinner.ispinner-large .ispinner-blade:nth-child(3) {
-webkit-transform: rotate(135deg) translateY(-11.5px);
transform: rotate(135deg) translateY(-11.5px); }
.ispinner.ispinner-large .ispinner-blade:nth-child(4) {
-webkit-transform: rotate(180deg) translateY(-11.5px);
transform: rotate(180deg) translateY(-11.5px); }
.ispinner.ispinner-large .ispinner-blade:nth-child(5) {
-webkit-transform: rotate(225deg) translateY(-11.5px);
transform: rotate(225deg) translateY(-11.5px); }
.ispinner.ispinner-large .ispinner-blade:nth-child(6) {
-webkit-transform: rotate(270deg) translateY(-11.5px);
transform: rotate(270deg) translateY(-11.5px); }
.ispinner.ispinner-large .ispinner-blade:nth-child(7) {
-webkit-transform: rotate(315deg) translateY(-11.5px);
transform: rotate(315deg) translateY(-11.5px); }
.ispinner.ispinner-large .ispinner-blade:nth-child(8) {
-webkit-transform: rotate(360deg) translateY(-11.5px);
transform: rotate(360deg) translateY(-11.5px); }
@-webkit-keyframes iSpinnerBlade {
0% {
opacity: 0.85; }
50% {
opacity: 0.25; }
100% {
opacity: 0.25; } }
@keyframes iSpinnerBlade {
0% {
opacity: 0.85; }
50% {
opacity: 0.25; }
100% {
opacity: 0.25; } }External Link for Pure CSS Loading Spinner
Related Tags
Add Comment
Other Items in Loading Animation
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript
Random Quote
