.loader
.credit Photo by <a href="https://unsplash.com/photos/1xosqj8fApw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Hans Veth</a> on <a href="https://unsplash.com/search/photos/bear?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Unsplash</a>

@import url('https://fonts.googleapis.com/css?family=Lato:300,900')

*
  box-sizing border-box

html
body
  background-color #111
  display flex
  align-items center
  justify-content center
  font-family 'Lato', sans-serif
  height 100vh
  width 100vw

addBg()
  background-image url('https://github.com/jh3y/pics/blob/master/codepen/cropped-bear.png?raw=true')


.loader
  height 200px
  width 300px
  position relative

  &:before
  &:after
    position absolute
    top 0
    left 0
    content ''
    height 100%
    width 100%
    display block
    background-size contain
    background-position center
    background-repeat no-repeat
    addBg()

  &:before
    filter grayscale(100%) blur(5px)

  &:after
    animation-name load
    animation-duration 8s
    animation-iteration-count infinite

$steps = 8

getRandomStep($basement = 0)
  return floor(math(0, 'random') * (30 - $basement + 1) + $basement)

generateProgressSteps()
  $progress = 0
  $sums = 0
  for $step in (1..$steps)
    $progress += getRandomStep()
    if ($step == $steps)
      $progress = 100
    $sums[$step] = min($progress, 100)
  return $sums

$progressSteps = generateProgressSteps()

@keyframes load
  for $step in (0..$steps)
    $progress = 100 - $progressSteps[$step]
    {($step * (100 / $steps)) * 1%}
      clip-path inset(0 ($progress * 1%) 0 0)

.credit
  color darken(#fafafa, 45%)
  position fixed
  bottom 10px
  right 10px
  font-size 12px

  a
    color #fafafa
    text-decoration none
    cursor pointer

// 🔍