.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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.