Edit on
// jade: compressed

h1.title Tiny Single Element Loading Animations

main
  .animation
    .anim1
  .animation
    .anim2
  .animation
    .anim3
  .animation
    .anim4
  .animation
    .anim5
  .animation
    .anim6
  .animation
    .anim7
  .animation
    .anim8
  .animation
    .anim9
View Compiled
$color-primary = #ccc

.animation
  box-sizing border-box
  display flex
  align-items center
  justify-content center
  float left
  
  width 100px
  height @width
    
  border 2px solid #333
    
  border-radius .3em

// Animations //
    
.anim1
  position relative
  
  width 24px
  height 24px
    
  border 2px solid $color-primary
  
  border-radius 100%
   
  &:before
    width 2px
    
    display block
    position absolute
    left ( @height / 2 ) - ( @width / 2 )
    top 2px
    
    height ( @height / 2 ) - @top
    
    background-color $color-primary
    
    animation anim1 3s linear infinite
    content ""
    transform-origin 1px @height
  
  &:after
    width 2px
    
    display block
    position absolute
    left ( @height / 2 ) - ( @width / 2 )
    top 3px
    
    height ( @height / 2 ) - @top
    
    background-color $color-primary
    
    animation anim1 6 * 3s linear infinite
    content ""
    transform-origin 1px @height
  
  @keyframes anim1
    to
      transform rotate( 360deg )
 
.anim2
  position relative

  width 24px
  height @width

  border 2px solid $color-primary

  border-radius 100%

  &:before,
  &:after
    width 2px
    
    display block
    position absolute
    left ( @height / 2 ) - ( @width / 2 )
    top 2px
    
    height @height - @top * 2
    
    background-color $color-primary
    
    animation anim2 3s linear infinite
    content ""
    transform-origin 1px @left - 1px
  &:after
    animation anim2 3s linear -0.75s infinite
  
  @keyframes anim2
    to
      transform rotate( 360deg )
 
.anim3
  &:before
    display block
    
    width 24px
    height @width
    margin-top -5px // i forget how i got this number
    
    border 2px solid $color-primary
    
    content ""
    
    animation anim3 .5s ease infinite alternate
    border-radius 100% 100% 0 100%
    transform rotate( 45deg )
  
  &:after
    display block
    
    width 28px // more magical numbers
    height 8px
    margin-top 8px
    
    background-color $color-primary - 70%
    
    content ""
    
    border-radius 100%
  
  @keyframes anim3
    to
      transform rotate( 45deg ) translate( 3px, 3px )

.anim4
  width 24px
  height @width
    
  border 2px solid $color-primary
    
  border-radius 100%
    
  &:before
    display block
    
    width 8px
    height @width
    margin -2px -2px 0 0
    
    background-color $color-primary
    
    content ""
    
    animation anim4 1s linear infinite
    border-radius 100%
    transform-origin 12px 14px // ???????
  
  @keyframes anim4
    to
      transform rotate( 360deg )
 
.anim5
  width 24px
  height @width

  border-top 2px solid $color-primary
  border-bottom @border-top
  border-right 2px solid #222
  border-left @border-right
    
  animation anim5 0.75s ease infinite
  border-radius 100%
    
  @keyframes anim5
    to
      transform rotate( 180deg )

.anim6
  width 16px
  height @width
    
  background-color $color-primary
    
  animation anim6 1.5s ease infinite
  border-radius 100%
    
  @keyframes anim6
    to
      opacity 0
    
      transform scale( 2 )

.anim7
  width 24px
  height @width
    
  border-top 2px solid $color-primary
  border-right 2px solid #222
    
  animation anim7 1s ease infinite
  border-radius 100%
  
  @keyframes anim7
    to
      transform rotate( 360deg )

.anim8
  position relative
    
  width 6px
  height @width
    
  background $color-primary
  
  content ""
    
  animation anim8 1s ease -0.25s infinite alternate
  border-radius 100%
  
  &:before
    @extends .anim8
    position absolute
    
    left @width * -2
    
    animation anim8 1s ease -0.5s infinite alternate
  &:after
    @extends .anim8
    position absolute
    
    left @width * 2
    
    animation anim8 1s ease infinite alternate
  
  @keyframes anim8
    to
      background #333

.anim9
  width 24px
  height 2px
    
  background linear-gradient( to right,
    $color-primary, $color-primary 30%,
    #333 10%
  )
  
  animation anim9 1s linear infinite
  
  @keyframes anim9
    to
      background-position @width 0
View Compiled
Rerun