<div class="loader">
  <div class="tall-stack">
    <div class="butter falling-element"></div>
    <div class="pancake falling-element"></div>
    <div class="pancake falling-element"></div>
    <div class="pancake falling-element"></div>
    <div class="pancake falling-element"></div>
    <div class="pancake falling-element"></div>
    <div class="pancake falling-element"></div>
    <div class="plate">
      <div class="plate-bottom"></div>
      <div class="shadow"></div>
    </div>
  </div>
</div>

<footer class="footer"></footer>
$color-pancake: #C4B26F;
$color-pancake: #D8CB9F;
$color-pancake-dark: darken($color-pancake,50%);
$color-butter: #EADD4D;
$color-bg: #249D98;
$color-plate: #D3EBEA;

$animation-duration: 6000ms;

body{
  background:$color-bg;
  overflow:hidden;
}

.loader{
  position:absolute;
  top:50%;
  left:50%; 
  transform:translate(-50%,-50%);
}

.tall-stack{
  animation: slide-plate-out $animation-duration infinite;
  animation-fill-mode: forwards;
  animation-timing-function:ease;
}

.plate{
  width:230px;
  height:14px;
  background:$color-plate;
  position:relative;
  border-radius:6px 6px 2rem 2rem;
  animation: slide-plate-in $animation-duration infinite;
  transform: translateX(100vw);
  animation-fill-mode: forwards;
  animation-timing-function: ease;

  .plate-bottom{
    content:'';
    display:block;
    height:50%;
    width:140px;
    background:darken($color-plate,4%);
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-70px;
    border-radius:0 0 1rem 1rem;
    z-index:1;
  }

  .shadow{
    position:absolute;
    top:130%;
    left:50%;
    margin-left:-90px;
    z-index:0;
    width:180px;
    height:10px;
    background:rgba(0,0,0,.2);
    border-radius:80%;
    z-index:0;
  }
}

.butter{
  width:48px;
  height:12px;
  background:$color-butter;
  margin:auto;
  border-radius:2px;
  box-shadow: inset 0 -2px 0 2px rgba($color-pancake-dark,.1);
}

.pancake{
  width:200px;
  height:14px;
  background: $color-pancake;
  border-radius:1rem;
  box-shadow: inset 0 -2px 0 3px rgba($color-pancake-dark,.1);
  margin:auto;
}

.falling-element{
  transform: translateY(-100vh);
  animation-timing-function: ease-in;
  animation-fill-mode:forward;
  animation: element-drop $animation-duration infinite;
  position:relative;  
}

$elements:8;
$drop-delay: .4s;
$drop-interval: .22;
@for $i from 0 to $elements {
  .falling-element:nth-child(#{$elements - $i}) {
    animation-delay:  ($drop-interval * $i) + $drop-delay;
  }
}  

@keyframes element-drop {
  0%,100%{
    transform: translateY(-100vh) scaleY(.7);
    opacity:1;
  }
  11%{
    transform: translateY(20%) scaleY(1.2);
  }
  13%{
    transform: translateY(-30%) scaleY(.9);
  } 
  14%,67%{
    transform: translateY(0%) scaleY(1);
    opacity:1;
  }
  68%{
    opacity:0;
    transition:none;
    transform: translateY(-100vh) scaleY(.7);
  }
}

@keyframes slide-plate-in{
  0%{
    transform: translateX(100vw);
  }
  15%,100%{
    transform: translateX(0);
  }
}

@keyframes slide-plate-out{
  65%{
    transform: translateX(0);
  }
  85%,100%{
    transform: translateX(-100vw);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.