Pen Settings

HTML

CSS

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

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

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.

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

              
                .loading-cat
  .cat-body
  .cat-animation-mask
  .cat-head
    .cat-face
    .cat-ear
    .cat-hand
    .cat-eye
    .cat-eye-light
    .cat-mouth
    .cat-beard.left
    .cat-beard.right
  .cat-foot
    .cat-belly
    .cat-leg
    .cat-tail
  
blockquote Inspired from <a href="https://dribbble.com/domaso">domaso</a>'s dribbble: <a href="https://dribbble.com/shots/3197970-Loading-cat">Loading cat</a>
              
            
!

CSS

              
                $color-background: #E7DFDD
$color-border: #514E51
$color-body: #EBA764
$color-mouth: #FD7667
$color-belly: #F1C28F
$color-tail: #C48344

body
  background-color: $color-background

blockquote
  position: absolute
  right: 0
  bottom: 0
  font-weight: 300
  font-size: 15px
  color: gray
  
  a
    color: gray
  
.loading-cat
  position: relative
  width: 300px
  height: 300px
  margin: 48px auto

.cat-body
  position: absolute
  width: 290px
  height: 290px
  background-color: $color-body
  border-radius: 50%
  border: 5px solid $color-border
   
  &:before
    content: ''
    position: absolute
    top: calc(50% - 188px/2 - 5px)
    left: calc(50% - 188px/2 - 5px)
    width: 188px
    height: 188px
    border: 5px solid $color-border
    border-radius: 50%
    background-color: $color-background
  
  &:after
    content: ''
    position: absolute
    top: calc(50% - 222px/2 - 22px)
    left: calc(50% - 222px/2 - 22px)
    width: 222px
    height: 222px
    border: 22px solid $color-belly
    border-radius: 50%

.cat-animation-mask
  position: absolute
  width: 50%
  height: 50%
  background-color: $color-background
  transform-origin: right bottom
  
  &:before
    content: ''
    position: absolute
    left: 100%
    width: 100%
    height: 100%
    background-color: $color-background
    transform-origin: left bottom
 
  &:after
    content: ''
    position: absolute
    top: 100%
    width: 100%
    height: 100%
    background-color: $color-background
    transform-origin: right top

.cat-head
  position: absolute
  right: 0
  top: 0
  width: 50%
  height: 50%
  background-color: $color-background
  transform-origin: left bottom
  
  .cat-face
    position: absolute
    bottom: 0px
    right: 0
    width: 50px
    height: 40px
    background-color: $color-body
    border: 5px solid $color-border
    border-bottom: 0
    
    &:before
      content: ''
      position: absolute
      left: calc(50% - 10px)
      bottom: -15px
      width: 22px
      height: 22px
      background-color: $color-belly
      border-radius: 50%
  
  .cat-ear
    position: absolute
    bottom: 39px
    right: 0
    width: 10px
    height: 12px
    background-color: $color-body
    border: 5px solid $color-border
    border-bottom: 0
    border-radius: 20px 0 0 0
    
    &:before
      content: ''
      position: absolute
      top: -5px
      left: -45px
      width: 10px
      height: 12px
      background-color: $color-body
      border: 5px solid $color-border
      border-bottom: 0
      border-radius: 0 20px 0 0
   
  .cat-hand
    position: absolute
    bottom: -32px
    right: 0
    width: 10px
    height: 30px
    background-color: $color-body
    border: 5px solid $color-border
    border-top: 0
    border-radius: 0 0 10px 10px
    
    &:before
      content: ''
      position: absolute
      top: 0
      left: -45px
      width: 10px
      height: 30px
      background-color: $color-body
      border: 5px solid $color-border
      border-top: 0
      border-radius: 0 0 10px 10px
   
  .cat-eye, .cat-eye-light
    position: absolute
    top: 116px
    right: 12px
    width: 6px
    height: 6px
    background-color: $color-border
    border-radius: 3px
    
    &:before
      content: ''
      position: absolute
      top: 0px
      right: 30px
      width: 6px
      height: 6px
      background-color: $color-border
      border-radius: 3px
    
  .cat-eye-light
    background-color: white
    box-shadow: 0 0 10px white
    opacity: 0
    animation: eye-light-animation 2.5s 1s infinite 
    
    &:before
      background-color: white
      box-shadow: 0 0 10px white
      opacity: 0
      animation: eye-light-animation 2.5s 1s infinite 
    
  .cat-mouth
    position: absolute
    bottom: 16px
    right: 27px
    width: 2px
    height: 0px
    background-color: $color-mouth
    border: 2px solid $color-border
    border-top: 0
    border-radius: 0 0 10px 10px
    animation: mouth-animation 2.5s 1s infinite 
     
    &:before
      content: ''
      position: absolute
      top: 0
      right: -4px
      width: 2px
      height: 2px
      background-color: $color-body
      border: 2px solid $color-border
      border-top: 0
      border-radius: 0 0 10px 10px
     
    &:after
      content: ''
      position: absolute
      top: 0
      right: 0px
      width: 2px
      height: 2px
      background-color: $color-body
      border: 2px solid $color-border
      border-top: 0
      border-radius: 0 0 10px 10px
   
  .cat-beard
    position: absolute
    bottom: 18px
    right: -4px
    width: 12px
    height: 3px
    background-color: $color-border
    
    &:before
      content: ''
      position: absolute
      top: -5px
      right: 0
      width: 12px
      height: 3px
      background-color: $color-border
      transform: rotate(-10deg)
     
    &:after
      content: ''
      position: absolute
      top: 5px
      right: 0
      width: 12px
      height: 3px
      background-color: $color-border
      transform: rotate(10deg)
     
    &.right
      right: 52px
      
      &:before
        transform: rotate(10deg)
      
      &:after
        transform: rotate(-10deg)
     
.cat-foot
  position: absolute
  left: 0
  bottom: 0
  width: 50%
  height: 50%
  background-color: $color-background
  transform-origin: right top
  
  .cat-belly
    position: absolute
    bottom: 0
    right: 0
    width: 14px
    height: 46px
    background-color: $color-body
    border: 5px solid $color-border
    border-left: 0
    border-right: 0

  .cat-leg
    position: absolute
    bottom: 0px
    right: 14px
    width: 30px
    height: 10px
    background-color: $color-body
    border: 5px solid $color-border
    border-right: 0
    border-radius: 10px 0 0 10px

    &:before
      content: ''
      position: absolute
      top: -41px
      right: 0
      width: 30px
      height: 10px
      background-color: $color-body
      border: 5px solid $color-border
      border-right: 0
      border-radius: 10px 0 0 10px
    
  .cat-tail
    position: absolute
    bottom: 16px
    right: 14px
    width: 50px
    height: 14px
    background-color: $color-tail
    border: 5px solid $color-border
    border-right: 0
    border-radius: 14px 0 0 14px
    
    &:after
      content: ''
      position: absolute
      right: -28px
      bottom: -4px
      width: 22px
      height: 22px
      background-color: $color-belly
      border-radius: 50%
      
    &:before
      content: ''
      position: absolute
      bottom: -7px
      right: 0
      width: 10px
      height: 18px
      background-color: $color-body
      border: 5px solid $color-border
      border-right: 0
      border-radius: 12px 0 0 12px
      
.cat-animation-mask
  transform: rotate(45deg)
  animation: mask-animation 2.5s 1s infinite 
  
  &:before
    animation: mask-animation-sub-right 2.5s 1s infinite
  
  &:after
    animation: mask-animation-sub-left 2.5s 1s infinite
  
.cat-head
  transform: rotate(70deg)
  animation: head-animation 2.5s 1s infinite
  animation-timing-function: cubic-bezier(.2,0,.09,1)

.cat-foot
  transform: rotate(25deg)
  animation: foot-animation 2.5s 1s infinite
  animation-timing-function: cubic-bezier(.2,0,.45,1)
  
@keyframes mask-animation
  0%
    transform: rotate(45deg)
  100%
    transform: rotate(-675deg)

@keyframes mask-animation-sub-left
  0%
    transform: rotate(0deg)
  50%
    transform: rotate(90deg)
  100%
    transform: rotate(0deg)
  
@keyframes mask-animation-sub-right
  0%
    transform: rotate(0deg)
  50%
    transform: rotate(-90deg)
  100%
    transform: rotate(0deg)

@keyframes head-animation
  0%
    transform: rotate(70deg)
  100%
    transform: rotate(-650deg)

@keyframes foot-animation
  0%
    transform: rotate(25deg)
  100%
    transform: rotate(-695deg)

@keyframes eye-light-animation
  0%
    opacity: 0
    height: 6px
  50%
    opacity: .75
    height: 50px
  80%
    opacity: 1
    height: 6px
  100%
    opacity: 0

@keyframes mouth-animation
  0%
    height: 0px
  50%
    height: 10px
  100%
    height: 0px
              
            
!

JS

              
                
              
            
!
999px

Console