<div class="loading">
  <div class="body"></div>
  <div class="mask"></div>
  <div class="mask-head">   
    <div class="face"></div>
    <div class="nose"></div>
    <div class="test"></div>
    <div class="ear"></div>  
    <div class="eye"></div>  
    <div class="mouth"></div>   
    <div class="nose_circle" ></div>
    <div class="hand"></div>
     <div class="tie"></div>
  </div>
  <div class="mask-foot">
    <div class="belly"></div>
    <div class="leg"></div>
  </div>
</div>
$loading-wh: 20em
$mask-wh: $loading-wh/2
$body-border-size: 0.4em

$body-wh: $loading-wh - $body-border-size*2
$body-wh-del: $loading-wh/2

$leg-w: $loading-wh/10
$leg-h: $leg-w/4

$border-color: #555
$bg-color: #0cd
$body-color: #fff

$border-theme: $body-border-size solid $border-color

body
  background-color: $bg-color

.loading
  position: relative
  width: $loading-wh
  height: $loading-wh
  margin: $loading-wh/2 auto

.body
  position: absolute
  width: $body-wh
  height: $body-wh
  background-color: $body-color
  border-radius: 50%
  border: $border-theme
  &:before
    content: ''
    position: absolute
    width: $body-wh-del
    height: $body-wh-del
    background-color: $bg-color
    border: $border-theme
    top: -$body-border-size*2 + $body-wh-del/2
    left: -$body-border-size*2 + $body-wh-del/2
    border-radius: 50%

.mask, .mask-foot, .mask-head
  position: absolute
  width: $mask-wh
  height: $mask-wh
  background-color: $bg-color
  transform: rotate(45deg)
  animation: mask-animation 4s 1s infinite
  
.mask
  top: 0
  left: 0
  transform-origin: right bottom 
  &:before, &:after
    content: ''
    position: absolute
    width: 100%
    height: 100%
    background-color: $bg-color
  &:before
    left: 100%
    transform-origin: left bottom
  &:after
    top: 100%
    transform-origin: right top

@keyframes mask-animation
  0%
    transform: rotate(45deg)
  100%
    transform: rotate(-675deg)

.mask-foot
  left: 0
  bottom: 0
  transform-origin: right top
  
  .belly, .leg, .leg:before
    position: absolute
    background-color: $body-color
    border: $border-theme
    border-right: 0
    
  .belly
    width: 1em
    height: ( $body-wh - $body-wh-del ) /2 -$body-border-size
    bottom: 0
    right: 0
    
  .leg, .leg:before
    width: $leg-w
    height: $leg-h
    border-radius: 10px 0 0 10px
    
  .leg
    bottom: 0
    right: 0.9em
    &:before
      content: ''
      top: - ( $body-wh - $body-wh-del ) /2 +$body-border-size + 0.1em
      right: 0
    
$test: (( $body-wh - $body-wh-del ) /2 -$body-border-size )/2

.mask-head
  right: 0
  top: 0
  transform-origin: left bottom

  .nose_circle
    position: absolute
    width: 1.8em
    height: 1.8em
    border-radius: 50%
    background-color: #222
    bottom: 1.8em
    left: 1em  
    
  .face
    position: absolute
    bottom: 0
    right: 0
    width: ( $body-wh - $body-wh-del ) /2 -$body-border-size
    height: 7em
    background-color: $body-color
    border: $border-theme
    border-bottom: 0
    
    
  .ear, .ear:before
    position: absolute
    width: $leg-h
    height: $leg-w*2
    background-color: $body-color
    border: $body-border-size solid $border-color
    border-bottom: 0
    border-radius: 10px 10px 0 0
    
  .ear
    bottom: 7.5em
    right: -$body-border-size/2 - 0.6em 
    &:before
      content: ''
      top: -$body-border-size
      right: ( $body-wh - $body-wh-del ) /2 -$body-border-size*3 +0.2em
  .test
    position: absolute
    width: 15em
    height: 15em
    background-color: $bg-color
    border-radius: 50%
    transform-origin: right bottom
    right: 4.3em
    bottom: 1.6em
  .nose
    position: absolute
    width: 9em
    height: 7em
    border-radius: 50%
    background-color: $body-color
    top: 3em
    right: -0.5em
    box-shadow: 3px 3px 0 5px $border-color
    &:before
      position: absolute
      content: ''
      width: 72%
      height: 50%
      background-color: $body-color
      right: 0.1em
      top: -0.5em
      box-shadow: 3px -5px 0 5px $border-color
    &:after
      position: absolute
      content: ''
      width: 150%
      height: 150%
      border-radius: 50%
      background-color: $bg-color
      bottom: 2em
      right: 5.2em
      box-shadow: 5px -5px 0 5px $border-color
    
  .eye, .eye:before
    position: absolute
    width: 1.4em
    height: 0.4em
    /*border-radius: 50%
    background-color: #444 
  .eye
    right: 0.6em
    top: 4.2em
    transform: rotate(25deg)
    &:before
      content: ''
      right: 2em
      top: 0.4em
      transform: rotate(-25deg)
    
  .tie
    position: absolute
    border-color: transparent #f33 transparent #f33
    border-style: solid solid solid solid
    border-width: 1.2em
    bottom: -1.6em
    right: 1em
    
  .mouth
    position: absolute
    width: 1.6em
    height: 1.4em
    background-color: #f55
    border-radius: 50%
    bottom: 2em
    right: 1em
    animation: face-animation 2.5s 1s infinite
    
  .hand, .hand:before
    position: absolute
    width: $leg-h
    height: $leg-w
    background-color: $body-color
    border: $body-border-size solid $border-color
    border-bottom: 0
    border-radius: 10px 10px 0 0
  .hand
    top: 7.5em
    right: -$body-border-size/2 + 0.2em 
    &:before
      content: ''
      right: 3em
      top: 0.5em
    
    
@keyframes face-animation
  0%
    transform: rotate(25deg)
  100%
    transform: rotate(-695deg)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.