escalator loader

escalator loader.markdown

escalator loader

A Pen by Håken Lid on CodePen.

License.

index.html

<div class=loader>
    <svg viewBox="0 0 3 3">
      <polygon id="logo" points="4,0 3,0 3,1 2,1 2,2 1,2 1,3 0,3 0,4 4,4"/> 
    </svg>
</div>

style.css

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.loader {
  flex: 1;
  max-height: 80vh;
  max-width: 80vh;
  border-radius: 1000vh;
  background: #aaa;
  box-sizing: border-box;
  svg { margin: 20%; }
}
@keyframes ascend {
  0% { transform: translate(-1px, 0px); }
  100% {  transform: translate(0px, -1px); }
}
@keyframes hump {
  0%, 100% { transform: translate(-1px, 0px); }
  20% {  transform: translate(0px, -1px); }
}
#logo {
  fill: #fff;
  transform: translate(-1px, 0px);
  animation-name: ascend;
  animation-direction: forwards;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}