Pure CSS Loading Spinners

If you are looking for loading spinner for your web page which shows while anything is processing. These loading spinner purely made on CSS, you don’t need to place any gif image to show loading. just call the css on page and all set you’ll see a loading spinner without image. There are different different types of loading spinner which you can use as per your web page design.

Following types of loading spinners

  • Spinner Circle Rotation
  • Spinner 3Balls Scale
  • Spinner VolumeButton
  • Spinner Vortex
  • Spinner Slices
  • Spinner Sphere
  • Spinner Bars
  • Spinner Clock
  • Spinner Wave
  • Spinner Texture
  • Spinner LoadBar
  • Spinner Hydrogen

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-sm-2">
      <div class="sp sp-circle"></div>
      <h5>Circle</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-3balls"></div>
      <h5>3 Balls</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-volume"></div>
      <h5>Volume</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-vortex"></div>
      <h5>Vortex</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-slices"></div>
      <h5>Slices</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-sphere"></div>
      <h5>Sphere</h5>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <div class="sp sp-bars"></div>
      <h5>Bars</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-clock"></div>
      <h5>Clock</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-wave"></div>
      <h5>Wave</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-texture"></div>
      <h5>Texture</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-loadbar"></div>
      <h5>LoadBar</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-hydrogen"></div>
      <h5>Hydrogen</h5>
    </div>
  </div>
</div>



CSS

$spCol: #000;
body {
    background-color: #f9f9f9;
    margin-top: 25px;
}
.col-sm-2 {
    padding: 10px;
    border-radius: 4px;
    height: 125px;
    margin-bottom: 10px;
}
 
.sp {
    width: 32px;
    height: 32px;
    clear: both;
    margin: 20px auto;
}
 
 
/* Spinner Circle Rotation */
.sp-circle {
    border: 4px rgba($spCol,0.25) solid;
    border-top: 4px rgba($spCol,1) solid;
    border-radius: 50%;
    -webkit-animation: spCircRot .6s infinite linear;
    animation: spCircRot .6s infinite linear;
}
@-webkit-keyframes spCircRot {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@keyframes spCircRot {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
 
 
 
/* Spinner 3Balls Scale */
.sp-3balls, .sp-3balls:before, .sp-3balls:after {
    border-radius: 50%;
    background-color: $spCol;
    width: 18px;
    height: 18px;
    transform-origin: center center;
    display: inline-block;
}
.sp-3balls {
    position: relative;
    background-color: rgba($spCol,1);
    opacity: 1;
    -webkit-animation: spScaleAlpha 1s infinite linear;
    animation: spScaleAlpha 1s infinite linear;
}
.sp-3balls:before, .sp-3balls:after {
    content: '';
    position: relative;
    opacity: 0.25;
}
.sp-3balls:before {
    left: 30px;
    top: 0px;
    -webkit-animation: spScaleAlphaBefore 1s infinite linear;
    animation: spScaleAlphaBefore 1s infinite linear;
}
.sp-3balls:after {
    left: -30px;
    top: -23px;
    -webkit-animation: spScaleAlphaAfter 1s infinite linear;
    animation: spScaleAlphaAfter 1s infinite linear;
}
@-webkit-keyframes spScaleAlpha {
    0% { opacity: 1; }
    33% { opacity: 0.25; }
    66% { opacity: 0.25; }
    100% { opacity: 1; }
}
@keyframes spScaleAlpha {
    0% { opacity: 1; }
    33% {  opacity: 0.25; }
    66% { opacity: 0.25; }
    100% {  opacity: 1; }
}
@-webkit-keyframes spScaleAlphaBefore {
    0% { opacity: 0.25; }
    33% { opacity: 1; }
    66% { opacity: 0.25; }
}
@keyframes spScaleAlphaBefore {
    0% { opacity: 0.25; }
    33% { opacity: 1; }
    66% { opacity: 0.25; }
}
@-webkit-keyframes spScaleAlphaAfter {
    33% { opacity: 0.25; }
    66% { opacity: 1; }
    100% { opacity: 0.25; }
}
@keyframes spScaleAlphaAfter {
    33% { opacity: 0.25; }
    66% { opacity: 1; }
    100% { opacity: 0.25; }
}
 
 
/* Spinner VolumeButton */
.sp-volume {
    background-color: $spCol;
    border-radius: 50%;
    position: relative;
    -webkit-animation: spVolRot .6s infinite linear;
    animation: spVolRot .6s infinite linear;
}
.sp-volume:after {
    content: '';
    border-radius: 50%;
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    left: 5px;
    top: 5px;
    background-color: lighten($spCol,100%);
}
@-webkit-keyframes spVolRot {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@keyframes spVolRot {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
 
 
/* Spinner Vortex */
.sp-vortex {
    border: 1px $spCol solid;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.sp-vortex:after, .sp-vortex:before {
    content: '';
    border-radius: 50%;
    position: absolute;
    width: inherit;
    height: inherit;
    -webkit-animation: spVortex 2s infinite linear;
    animation: spVortex 2s infinite linear;
}
.sp-vortex:before {
    border-top: 6px $spCol solid;
    top: -3px;
    left: calc( -50% - 3px );
    transform-origin: right center;
}
.sp-vortex:after {
    border-bottom: 6px $spCol solid;
    top: 3px;
    right: calc( -50% - 3px );
    transform-origin: left center;
}
@-webkit-keyframes spVortex {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@keyframes spVortex {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
 
 
 
/* Spinner Slices */
.sp.sp-slices {
    border-radius: 50%;
    border-top: 16px rgba($spCol,0.75) solid;
    border-left: 16px rgba($spCol,0.25) solid;
    border-bottom: 16px rgba($spCol,0.25) solid;
    border-right: 16px rgba($spCol,0.25) solid;
    -webkit-animation: spSlices 1s infinite linear;
    animation: spSlices 1s infinite linear;
}
@-webkit-keyframes spSlices {
    0% {
        border-top: 16px rgba($spCol,0.75) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
    25% {
        border-top: 16px rgba($spCol,0.25) solid;
        border-right: 16px rgba($spCol,0.75) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
    50% {
        border-top: 16px rgba($spCol,0.25) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.75) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
    75% {
        border-top: 16px rgba($spCol,0.25) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.75) solid;
    }
    100% {
        border-top: 16px rgba($spCol,0.75) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
}
@keyframes spSlices {
    0% {
        border-top: 16px rgba($spCol,0.75) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
    25% {
        border-top: 16px rgba($spCol,0.25) solid;
        border-right: 16px rgba($spCol,0.75) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
    50% {
        border-top: 16px rgba($spCol,0.25) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.75) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
    75% {
        border-top: 16px rgba($spCol,0.25) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.75) solid;
    }
    100% {
        border-top: 16px rgba($spCol,0.75) solid;
        border-right: 16px rgba($spCol,0.25) solid;
        border-bottom: 16px rgba($spCol,0.25) solid;
        border-left: 16px rgba($spCol,0.25) solid;
    }
}
 
 
 
/* Spinner Sphere */
.sp-sphere {
    border-radius: 50%;
    border-left: 0px $spCol solid;
    border-right: 0px $spCol solid;
    -webkit-animation: spSphere 1s infinite linear;
    animation: spSphere 1s infinite linear;
}
@-webkit-keyframes spSphere {
    0% {
        border-left: 0px $spCol solid;
        border-right: 0px $spCol solid;
    }
    33% {
        border-left: 32px $spCol solid;
        border-right: 0px $spCol solid;
    }
    34% {
        border-left: 0px $spCol solid;
        border-right: 32px $spCol solid;
    }
    66% {
        border-left: 0px $spCol solid;
        border-right: 0px $spCol solid;
    }
}
@keyframes spSphere {
    0% {
        border-left: 0px $spCol solid;
        border-right: 0px $spCol solid;
    }
    33% {
        border-left: 32px $spCol solid;
        border-right: 0px $spCol solid;
    }
    34% {
        border-left: 0px $spCol solid;
        border-right: 32px $spCol solid;
    }
    66% {
        border-left: 0px $spCol solid;
        border-right: 0px $spCol solid;
    }
}
 
 
 
/* Spinner Bars */
.sp-bars {
    position: relative;
    width: 10px;
    border: 1px $spCol solid;
    background-color: rgba($spCol,0.25);
    -webkit-animation: spBars 1s infinite linear;
    animation: spBars 1s infinite linear;
}
.sp-bars:after, .sp-bars:before {
    content:'';
    position: absolute;
    width: inherit;
    height: inherit;
    border: inherit;
    background-color: inherit;
    top: -1px;
}
.sp-bars:before {
    left: -20px;
    -webkit-animation: spBarsBefore 1s infinite linear;
    animation: spBarsBefore 1s infinite linear;
}
.sp-bars:after {
    right: -20px;
    -webkit-animation: spBarsAfter 1s infinite linear;
    animation: spBarsAfter 1s infinite linear;
}
@keyframes spBarsBefore {
    0% {
        transform: scale(1,1);
    }
    25% {
        transform: scale(1,1.25);
    }
    50% {
        transform: scale(1,0.75);
    }
    75% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(1,1);
    }
}
@keyframes spBars {
    0% {
        transform: scale(1,1);
    }
    25% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1,1.25);
    }
    75% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(1,1);
    }
}
@keyframes spBarsAfter {
    0% {
        transform: scale(1,1);
    }
    25% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1,0.75);
    }
    75% {
        transform: scale(1,1.25);
    }
    100% {
        transform: scale(1,1);
    }
}
 
 
 
/* Spinner Clock */
.sp-clock {
    border: 1px $spCol solid;
    border-radius: 50%;
    position: relative;
}
.sp-clock:before {
    content:'';
    border-left: 1px $spCol solid;
    position: absolute;
    top: 2px;
    width: 1px;
    height: calc( 50% - 2px );
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-animation: spClock 1s infinite linear;
    animation: spClock 1s infinite linear;
}
@-webkit-keyframes spClock {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@keyframes spClock {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
 
 
 
/* Spinner Wave */
.sp-wave {
    border-radius: 50%;
    position: relative;
    opacity: 1;
}
.sp-wave:before, .sp-wave:after  {
    content:'';
    border: 1px $spCol solid;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    left:0px;
}
.sp-wave:before {
    transform: scale(1,1);
    opacity: 1;
    -webkit-animation: spWaveBe 0.6s infinite linear;
    animation: spWaveBe 0.6s infinite linear;
}
.sp-wave:after {
    transform: scale(0,0);
    opacity: 0;
    -webkit-animation: spWaveAf 0.6s infinite linear;
    animation: spWaveAf 0.6s infinite linear;
}
@-webkit-keyframes spWaveAf {
    from { -webkit-transform: scale(0.5,0.5); opacity: 0; }
    to { -webkit-transform: scale(1,1); opacity: 1; }
}
@keyframes spWaveAf {
    from { transform: scale(0.5,0.5); opacity: 0; }
    to { transform: scale(1,1); opacity: 1; }
}
@-webkit-keyframes spWaveBe {
    from { -webkit-transform: scale(1,1); opacity: 1; }
    to { -webkit-transform: scale(1.5,1.5); opacity: 0; }
}
@keyframes spWaveBe {
    from { -webkit-transform: scale(1,1); opacity: 1; }
    to { -webkit-transform: scale(1.5,1.5); opacity: 0; }
}
 
 
 
/* Spinner Texture */
.sp-texture {
    border: 1px $spCol solid;
    border-radius: 4px;
    position: relative;
    background: linear-gradient(45deg, transparent 49%, $spCol 50%, $spCol 50%, transparent 51%, transparent),
                linear-gradient(-45deg, transparent 49%, $spCol 50%, $spCol 50%, transparent 51%, transparent);
    background-size: 16px 16px;
    background-position: 0% 0%;
    -webkit-animation: spTexture 1s infinite linear;
    animation: spTexture 1s infinite linear;
}
@-webkit-keyframes spTexture {
    from { background-position: 0px 0px; }
    to { background-position: -16px 0px; }
}
@keyframes spTexture {
    from { background-position: 0px 0px; }
    to { background-position: -16px 0px; }
}
 
 
 
 
/* Spinner LoadBar */
.sp-loadbar {
    width: 50px;
    height: 18px;
    border: 1px $spCol solid;
    border-radius: 4px;
    background: linear-gradient(-60deg, transparent 0%, transparent 50%, $spCol 50%, $spCol 75%, transparent 75%, transparent);
    background-size: 20px 30px;
    background-position: 0px 0px;
    -webkit-animation: spLoadBar 0.8s infinite linear;
    animation: spLoadBar 0.8s infinite linear;
}
@-webkit-keyframes spLoadBar {
    from { background-position: 0px 0px; }
    to { background-position: -20px 0px; }
}
@keyframes spLoadBar {
    from { background-position: 0px 0px; }
    to { background-position: -20px 0px; }
}
 
 
 
 
/* Spinner Hydrogen */
.sp-hydrogen {
    position: relative;
    border: 1px $spCol solid;
    border-radius: 50%;
    -webkit-animation: spHydro 0.6s infinite linear;
    animation: spHydro 0.6s infinite linear;
}
.sp-hydrogen:before, .sp-hydrogen:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: $spCol;
    border-radius: 50%;
}
.sp-hydrogen:before {
    top: calc( 50% - 5px );
    left: calc( 50% - 5px );
}
.sp-hydrogen:after {
    top: -1px;
    left: -1px;
}
@-webkit-keyframes spHydro {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@keyframes spHydro {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}


See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by bernethe. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.