Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                // 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
              
            
!

CSS

              
                $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
              
            
!

JS

              
                
              
            
!
999px

Console