css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              h1 
  = "Simple loader with only one <div>"
section
  .loader.loader-simple
  | Simple
section
  .loader.loader-double
  | Double  
section
  .loader.loader-pulser
  | Pulser
section
  .loader.loader-dot
  | Dot
section
  .loader.loader-dots
  | Dots
section
  .loader.loader-square
  | Square
section
  .loader.loader-triple
  | Triple
section
  .loader.loader-tetris
  | Tetris
            
          
!
            
              @import bourbon

$yellow: #f1c40f
$blue: #3498db
$green: #2ecc71
$tomato: tomato
body
  margin: 10px auto
  padding: 10px
  max-width: 1024px
  background: #333
  color: #fff
  font-family: "consolas", monospace
  display: flex
  flex-flow: row wrap
section
  flex: 1 0 300px
  min-height: 200px
  margin: 10px
  text-align: center
  display: flex
  align-items: center
  justify-content: center
  font-size: 42px
  border: 1px solid #222
h1
  flex: 1 0 100%
  text-align: center
  
  
.loader
  display: inline-block
  vertical-align: middle
  position: relative
  margin-right: 3em
  font-size: 10px // need to be round, so ems are round
.loader-triple
  width: 6em
  height: 6em
  border-radius: 50%
  border: 3px solid transparent
  border-top-color: #f1c40f
  animation: spin 2s linear infinite
  &:before
    content: ""
    position: absolute
    top: 5px
    left: 5px
    right: 5px
    bottom: 5px
    border-radius: 50%
    border: 3px solid transparent
    border-top-color: #3498db
    animation: spin 3s linear infinite
  &:after
    content: ""
    position: absolute
    top: 12px
    left: 12px
    right: 12px
    bottom: 12px
    border-radius: 50%
    border: 3px solid transparent
    border-top-color: #2ecc71
    animation: spin 1.5s linear infinite

.loader-double
  width: 2.8em
  height: 2.8em
  border-radius: 50%
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.2)
  &:before
    content: ""
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    border-radius: 50%
    border: 3px solid transparent
    border-left-color: $blue
    animation: spin-opacity 2s infinite linear
  &:after
    content: ""
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    border-radius: 50%
    border: 3px solid transparent
    border-right-color: $blue
    animation: spin-opacity 1s infinite reverse linear
      

.loader-pulser
  width: 3.2em
  height: 3.2em
  right: 2em
  position: relative
  &:before, &:after
    content: ''
    border: 2px solid $yellow
    border-radius: 50%
    height: 100%
    width: 100%
    position: absolute
    animation: pulse 1s ease-out
    animation-iteration-count: infinite
    opacity: 0
  &:before
    border: 2px solid $tomato
    animation-delay: .3s

.loader-simple
  width: 2.8em
  height: 2.8em
  border-radius: 50%
  &:before
    content: ""
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    border-radius: 50%
    border: 3px solid transparent
    border-left-color: $green
    border-top-color: $green
    animation: spin 1s infinite ease-in-out

.loader-square
  border: 3px solid rgba(0,0,0,0.2)   
  //border-radius: 50%
  width: 2em
  height: 2em
  transform: rotate(45deg)
  animation: square 2s infinite linear

.loader-dot
  background: $blue
  color: $blue
  border-radius: 50%
  width: 1em
  height: 1em
  right: 2em
  &:before,
  &:after
    content: ''
    position: absolute
    top: 0
    background: $blue
    border-radius: 50%
    width: 100%
    height: 100%
  &:before
    left: -1.5em
    animation: dot 1s infinite ease-in-out
  &:after
    right: -1.5em
    animation: dot 1s infinite ease-in-out
    animation-delay: 0.5s

.loader-dots
  background: rgba(#000,0.2)
  color: $blue
  border-radius: 50%
  width: 0.75em
  height: 0.75em
  right: 2em
  animation: spin 1s infinite ease-in-out
  &:before,
  &:after
    content: ''
    position: absolute
    top: 0
    background: $blue
    border-radius: 50%
    width: 100%
    height: 100%
  &:before
    left: -1.5em
  &:after
    right: -1.5em
  
.loader-tetris
  position: relative
  width: 1em
  height: 1em
  background-color: $yellow
  box-shadow: 0 -1.2em 0 $tomato
  animation: tetris 4s infinite ease-in-out
  &:before, &:after
    content: ''
    position: absolute
    top: 0
    left: -1.2em
    width: 100%
    height: 100%
    background: $blue
  &:after
    top: 1.2em
    background: $green
  
@keyframes tetris
  0%, 24%
    transform: translateY(-100%)
  25%, 49%
    transform: translateY(0) 
  50%, 74%
    transform: translateY(100%) 
  75%, 100%
    transform: translateY(200%) 

@keyframes dot
  0%
    transform: scale(0.8)
  50%
    transform: scale(1.2)
  100%
    transform: scale(0.8)
  
@keyframes square
  16%
    transform: rotate(45deg)    
    border-top-color: rgba(0,0,0,0.2)   
  32%
    border-left-color: rgba(0,0,0,0.2)
    border-top-color: $tomato
    border-right-color: rgba(0,0,0,0.2)
  48%
    border-top-color: rgba(0,0,0,0.2)
    border-right-color: $blue
    border-bottom-color: rgba(0,0,0,0.2)
  64%
    transform: rotate(45deg) scale(0.8)
    border-right-color: rgba(0,0,0,0.2)
    border-bottom-color: $yellow
    border-left-color: rgba(0,0,0,0.2)
  80%
    border-bottom-color: rgba(0,0,0,0.2)
    border-left-color: $green
    border-top-color: rgba(0,0,0,0.2)
  100%
    transform: rotate(45deg)
    border-left-color: rgba(0,0,0,0.2)  
  
@keyframes pulse
  0%
    transform: scale(0.1,.1)
    opacity: 0
  50%
    opacity: 1
  100%
    transform: scale(1.2,1.2)
    opacity: 0
    
  
@keyframes spin
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)
  
@keyframes spin-opacity
  0%
    transform: rotate(0deg)
    opacity: 1
  50%
    opacity: 0.4
  100%
    transform: rotate(360deg)
    opacity: 1
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console