CodePen Embed - CSS Loading Spinners

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

View Compiled

$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); }
}

View Compiled

This Pen is owned by Harold Soto on CodePen.

See more by @bernethe on CodePen

External CSS

//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.