<h1>Loaders</h1>
<div class="wrapper">
  <h2>Pure CSS circumferences</h2>
  <p>Simple Border-radius Loaders</p>
  <div class="circonf-wrapper">
    <div class="circonf circonf-1">
    </div>
    <div class="circonf circonf-2">
    </div>
    <div class="circonf circonf-3">
    </div>
    <div class="circonf circonf-4">
    </div>
    <div class="circonf circonf-5">
    </div>
    <div class="circonf circonf-6">
    </div>
  </div>

  <h2>Spinners</h2>
  <div class="item loading-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em">
    <circle cx="0.6em" cy="0.6em" r="0.5em" class="circle"/>
    </svg>
    <div>.loading-1</div>
  </div>
  <div class="item loading-2">
    <div class="spinner">
      <div class="circle circle-1">
        <div class="circle-inner"></div>
      </div>
      <div class="circle circle-2">
        <div class="circle-inner"></div>
      </div>
    </div>
    <div>.loading-2<br/> CSS only
    </div>
  </div>
  <div class="item loading-3">
    <div class="loading"></div>
    <div>.loading-3</div>
  </div>
  <div class="item loading-4">
    <div class="loading"></div>
    <div>.loading-4</div>
  </div>
  <div class="item loading-5">
    <div class="svg-wrapper">
      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em">
    <circle cx="0.6em" cy="0.6em" r="0.5em" class="circle"/>
    </svg>
    </div>
    <div>.loading-5 <br />SVG</div>
  </div>
  <h2>
    SVG
  </h2>
  <div class="item loading-6">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20"></circle>
    </svg>
  </div>

</div>
<a href="https://codepen.io/ingomc/pen/pNVqmX" target="_blank">Gooey Preloader &rsaquo;</a>
.circonf-wrapper {
 text-align:center; 
}
.circonf {
  $size:2em;
  $speed: .7s;
  margin: 1em;
  display:inline-block;
  width:$size;
  height:$size;
  border-radius:50%;
  border:4px solid silver;
  animation: circ-anim $speed linear infinite; 
}
.circonf-1 {
  border-bottom-color: grey;
}
.circonf-2 {
  border-color: grey;
  border-bottom-color:transparent;
}
.circonf-3 {
  border-color: grey;
  border-bottom-color:transparent;
  border-left-color:transparent;
}
.circonf-4 {
  border:3px solid grey;
  position:relative;
  &:after {
    position:absolute;
    content:"";
    width:80%;
    height:80%;
    background: transparent;
    top: 50%;
    left:50;
    margin-left:-40%;
    margin-top:-40%;
    border-radius:50%;
    border:2px solid grey;
    box-sizing:border-box;
    border-bottom-color:transparent;
    border-left-color:transparent;
  }
}
.circonf-5 {
  border:3px solid grey;
  position:relative;
  border-bottom-color:transparent;
  border-left-color:transparent;
  &:after {
    $speed: .7s;
    position:absolute;
    content:"";
    width:80%;
    height:80%;
    background: transparent;
    top: 50%;
    left:50;
    margin-left:-40%;
    margin-top:-40%;
    border-radius:50%;
    border:2px solid grey;
    box-sizing:border-box;
    border-bottom-color:transparent;
    border-left-color:transparent;
    animation: circ-anim ($speed/2) reverse linear infinite;
  }
}

.circonf-6 {
    border-width:0px;
    border-radius: 50%;
    border-top: 3px solid grey;
    border-right: 3px solid transparent;
}

@keyframes circ-anim {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-1 {
  $size: 0.5em;
  $circumference: 3.14 * 2 * $size;
  .circle {
    stroke: #000066;
    fill: none;
    stroke-width: 3px;
    stroke-dashoffset: -$circumference;
    stroke-dasharray: $circumference;
    animation: loading1 1.4s cubic-bezier(0.42, 0, 0.29, 1) infinite;
    transform: rotate(-90deg);
    transform-origin: 50%;
    position: relative;
  }
  @keyframes loading1 {
    0% {
      stroke-dashoffset: $circumference;
    }
    50% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -$circumference;
    }
  }
}

.loading-2 {
  $duration: .7s;
  $size: 2em;
  .spinner * {
    box-sizing: border-box;
  }
  .spinner {
    display: inline-block;
    animation-name: anim-spinner;
    animation-duration: $duration;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    .circle {
      width: $size;
      height: ($size/2);
      overflow: hidden;
    }
    .circle-inner {
      transform: rotate(45deg);
      border-radius: 50%;
      border: ($size/8) solid black;
      border-right: ($size/8) solid transparent;
      border-bottom: ($size/8) solid transparent;
      width: 100%;
      height: 200%;
      animation-name: anim-circle-1;
      animation-duration: $duration;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: cubic-bezier(.25, .1, .5, 1);
    }
    .circle-2 {
      transform: rotate(180deg);
      & .circle-inner {
        animation-name: anim-circle-2;
      }
    }
    @keyframes anim-circle-1 {
      from {
        transform: rotate(60deg);
      }
      to {
        transform: rotate(205deg);
      }
    }
    @keyframes anim-circle-2 {
      from {
        transform: rotate(30deg);
      }
      to {
        transform: rotate(-115deg);
      }
    }
    @keyframes anim-spinner {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}

.loading-3 {
  .loading {
    background: transparent;
    width: 2em;
    height: 2em;
    position: relative;
    margin:0 auto;
  }
  .loading:after {
    display: block;
    content: "";
    border-radius: 50%;
    height: 2px;
    width: 2px;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: 10px 0 0 2px #333, 7px 7px 0 2px #999, 0 10px 0 2px #999, -7px 7px 0 2px #999, -10px 0 0 2px #999, -7px -7px 0 2px #999, 0 -10px 0 2px #333, 7px -7px 0 2px #111;
    -webkit-animation: rotate 0.7s steps(8) infinite;
    -o-animation: rotate 0.7s steps(8) infinite;
    animation: rotate 0.7s steps(8) infinite;
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

  
.loading-4 .loading {
  $size:.5em;
  width: $size;
  height: $size;
  background: transparent;
  margin:2em;  
  border-radius:50%;
  animation: circ-anim .9s linear infinite;
  
      box-shadow: ($size*1.2) 0 0 0 #333, (-$size/1.5) (-$size) 0 0 #333,  (-$size/1.5) ($size) 0 0 #333;
}



.loading-5 {
  $size: 0.5em;
  $circumference: 3.14 * 2 * $size;
  $offset: 0.85;
  $circumference: $circumference * $offset;
  & .svg-wrapper {
    background: white;
    width:$size*3;
    height:$size*3;
    margin:0 Auto;
    padding:5px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 2px 2px 2px rgba(0,0,0,0.1);
  }
  .circle {
    stroke: #000066;
    fill: none;
    stroke-width: 3px;
    stroke-dashoffset: -$circumference;
    stroke-dasharray: $circumference;
    animation: loading5 1.4s linear infinite, color1 10s linear infinite;
    transform: rotate(-90deg);
    transform-origin: 50%;
    position: relative;
  }
  @keyframes loading5 {
    0% {
      transform: rotate(0);
      stroke-dashoffset: $circumference;
    }
    50% {
      stroke-dashoffset: 0;
    }
    100% {
      transform: rotate(360deg);
      stroke-dashoffset: -$circumference;
    }
  }
  
  @keyframes color1 {
    0% {
      stroke: #D8334A;
    }
    10% {
      stroke: #FC6E51;
    }
    20% {
      stroke: #FFCE54;
    }
    30% {
      stroke: #A0D468;
    }
    40% {
      stroke: #A0CECB;
    }
    50% {
      stroke: #4FC1E9;
    }
    60% {
      stroke: #8067B7;
    }
    70% {
      stroke: #BAA286;
    }
    80% {
      stroke: #CCD1D9;
    }
    90% {
      stroke: #2ECC71;
    }
    100% {
      stroke: #D8334A;
    }
  }
}


.loading-6 {
  svg {
  width: 3.75em;
  transform-origin: center;
  animation: rotate 2s linear infinite;
}

circle {
  fill: none;
  stroke: #fc2f70;
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -125px;
  }
}

}




@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: "Roboto";
}

.wrapper {
  background: #ddd;
  padding: 1em 2em;
  margin: 2em;
  box-shadow: 0px 2px 2px 0px rgba(20, 20, 20, .3);
  text-align: center;
  & .item {
    display: inline-block;
    margin: 0.5em 2em;
    vertical-align: middle;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.