.spinner
.spinner.yellow
.spinner.red     5%
.spinner.green
.spinner.rainbow

footer
 
View Compiled
@import "nib"

darken( color, percent )
  color * (1 - percent)

circle( size )
  width         size
  height        size
  border-radius 100%

.spinner
  circle( 100px )
  overflow            hidden
  position            relative
  box-shadow          0px 2px 4px rgba( 255, 255, 255, 0.15 )
  color               #7AF
  line-height         100px
  text-align          center
  z-index             0
  font-family         Tahoma, sans-serif
  font-size           25px
  text-shadow         2px 2px 2px #000
  font-weight         bold
  -webkit-text-stroke 1px rgba( 0, 0, 0, .5 )
  margin              30px
  display             inline-block

  /* The spinning color section */
  &::before
    content ""
    circle( 96px )
    background linear-gradient( #7AF, darken( #7AF, 70% ) 10%, #000 50%, #000 75%, darken( #7AF, 70% ) )
    absolute   top 0 left 0
    border     2px solid #000
    box-shadow inset 0px 0px 3px #000, 0px 0px 0px rgba( 0, 0, 0, 0 )
    animation  spin 2s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite
    z-index    -1

  /* The middle circle */
  &::after
    content ""
    circle( 80px )
    absolute   top 8px left 8px
    background linear-gradient( top, #3C, #10 )
    border     2px solid #000
    box-shadow inset 0px 3px 1px rgba(255,255,255,.1), inset 0px 10px 10px rgba( 255, 255, 255, .05 ), 0px 0px 5px #0
    z-index    -1

  /* Different colors */
  &.yellow
    color #FF0

    &::before
      background linear-gradient( #FF0, darken( #FF0, 70% ) 10%, #000 50%, #000 75%, darken( #FF0, 70% ) )

  &.red
    color #F00

    &::before
      background linear-gradient( #F00, darken( #F00, 70% ) 10%, #000 50%, #000 75%, darken( #F00, 70% ) )

  &.green
    color #0F0

    &::before
      background linear-gradient( #0F0, darken( #0F0, 70% ) 10%, #000 50%, #000 75%, darken( #0F0, 70% ) )

  &.rainbow
    color #FFF
    
    &::before
      background linear-gradient( #00F, #0F0 20%, #0FF 40%, #F00 60%, #F0F 80%, #FF0 )

@keyframes spin
  from
    transform rotate( 0deg )

  to
    transform rotate( 1440deg )

html, body
  height     100%

body
  background linear-gradient( top, #34, #20 )
  
footer
  position fixed
  bottom   0px
  right    0px
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.