iOS & OS X Style Pure CSS Loading Spinner

Preview:

Description:

A pure CSS/CSS3 based loading spinner with fullscreen overlay inspired by Apples’s iOS & OS X.

How to use it:

Create the Html for the loading spinner wrapped in an overlay container.

<div class="overlay">
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>
</div>

The CSS/CSS3 (SASS) rules to animate the loading spinner. You can easily change the color & size in the mixins.

$spinner-color: #69717d !default
$spinner-size: 48px !default

.overlay
  background: rgba(black,.8)
  height: 100vh
    
.spinner
  font-size: $spinner-size
  position: relative
  display: inline-block
  width: 1em
  height: 1em
  &.center
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    margin: auto
  .spinner-blade
    position: absolute
    left: .4629em
    bottom: 0
    width: .074em
    height: .2777em
    border-radius: .0555em
    background-color: transparent
    transform-origin: center -.2222em
    animation: spinner-fade 1s infinite linear

    $animation-delay: 0s
    $blade-rotation: 0deg

    @for $i from 1 through 12
      &:nth-child(#{$i})
        animation-delay: $animation-delay
        transform: rotate($blade-rotation)
        $blade-rotation: $blade-rotation + 30
        $animation-delay: $animation-delay + .083

@keyframes spinner-fade
  0%
    background-color: $spinner-color
  100%
    background-color: transparent