cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              // 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
            
          
!
            
              $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
            
          
!
999px
Loading ..................

Console