h1.intro cat loader

.box
  .cat
    .cat__body
    .cat__body
    .cat__tail
    .cat__head

blockquote.info
  | inspired from <a href="https://dribbble.com/domaso">domaso</a>'s dribbble: <a href="https://dribbble.com/shots/3197970-Loading-cat">Loading cat</a>
  br
  | fork from <a href="https://www.facebook.com/tenyoku8478">林天翼</a>'s <a href="https://www.csie.ntu.edu.tw/~b02902062/load_cat/">load cat</a>
  | via: <a href="https://www.facebook.com/groups/f2e.tw/permalink/1180443255326371/?comment_id=1180487985321898">FB comment</a>

@mixin fill-full($dir: 'full', $type: absolute) {
  position: $type;
  @if $dir != 'bottom' {top: 0; }
  @if $dir != 'right' {left: 0; }
  @if $dir != 'left' {right: 0; }
  @if $dir != 'top' {bottom: 0; }
}

.cat {
  position: relative;
  width: 100%;
  max-width: 20em;
  overflow: hidden;
  background-color: #e6dcdc;

  &::before {
    content: '';
    display: block;
    padding-bottom: 100%;
  }

  &:hover > * { animation-play-state: paused; }
  &:active > * { animation-play-state: running; }
}

%cat-img {
  @include fill-full;
  animation: rotating 2.79s cubic-bezier(.65, .54, .12, .93) infinite;

  &::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-size: 200%;
    background-repeat: no-repeat;
    background-image: url('https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il');
  }
}

.cat__head {
  @extend %cat-img;

  &::before {
    top: 0;
    right: 0;
    background-position: 100% 0%;
    transform-origin: 0% 100%;
    transform: rotate(90deg);
  }
}

.cat__tail {
  @extend %cat-img;
  animation-delay: .2s;

  &::before {
    left: 0;
    bottom: 0;
    background-position: 0% 100%;
    transform-origin: 100% 0%;
    transform: rotate(-30deg);
  }
}

.cat__body {
  @extend %cat-img;
  animation-delay: .1s;

  &:nth-of-type(2) {
    animation-delay: .2s;
  }

  &::before {
    right: 0;
    bottom: 0;
    background-position: 100% 100%;
    transform-origin: 0% 0%;
  }
}

@keyframes rotating {
  from { transform: rotate(720deg); }
  to { transform: none; }
}

.box {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  justify-content: center;
  align-items: center;
  background-color: #e6dcdc;
}

// reset

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  line-height: 1.4;
}

.intro {
  width: 90%;
  max-width: 36rem;
  padding-bottom: 1rem;
  margin: 0 auto 1em;
  padding-top: .5em;
  font-size: calc(1rem + 2vmin);
  text-transform: capitalize;
  border-bottom: 1px dashed rgba(#000, .3);
  text-align: center;

  small {
    display: block;
    opacity: .5;
    font-style: italic;
    text-transform: none;
  }
}

.info {
  margin: 0;
  padding: 1em;
  font-size: .9em;
  font-style: italic;
  font-family: serif;
  text-align: right;
  opacity: .5;

  a {
    color: inherit;
  }
}