Wavy Loading Animations

index.html

<div class="shaft-load6 loading-text">
  <div class="shaft1">L</div>
  <div class="shaft2">o</div>
  <div class="shaft3">a</div>
  <div class="shaft4">d</div>
  <div class="shaft5">i</div>
  <div class="shaft6">n</div>
  <div class="shaft7">g</div>
  <div class="shaft8">.</div>
  <div class="shaft9">.</div>
  <div class="shaft10">.</div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.loading-text {
  text-align: center;
  *,
  *:before,
  *:after {
    @include box-sizing(border-box);
  }
}

/* Universal styling */
[class^="shaft-load"] {
  margin: 50px auto;
  @include size(60px, 30px);
  > div {
    float: left;
    height: 100%;
    width: 5px;
    margin-right: 1px;
    display: inline-block;
    color: black;
  }
  .shaft1 { @include animation-delay(0.05s); }
  .shaft2 { @include animation-delay(0.1s); }
  .shaft3 { @include animation-delay(0.15s); }
  .shaft4 { @include animation-delay(0.2s); }
  .shaft5 { @include animation-delay(0.25s); }
  .shaft6 { @include animation-delay(0.3s); }
  .shaft7 { @include animation-delay(0.35s); }
  .shaft8 { @include animation-delay(0.4s); }
  .shaft9 { @include animation-delay(0.45s); }
  .shaft10 { @include animation-delay(0.5s); }
}


/* Shaft 1 */
.shaft-load {
  > div {
    @include animation(loading 1.5s infinite ease-in-out);
    @include transform(scaleY(0.05) translateX(-10px));
  }
}

@include keyframes(loading) {
  50% { 
    @include transform(scaleY(1.2) translateX(10px));
  }
}

/* Shaft 6 */
$height-start6: 22px;
$height-end6: 60px;
.shaft-load6 {
  height: $height-end6;
  width: 90px;
  overflow: hidden;
  > div {
    width: 8px;
    @include relative(null, null, -2px);
    margin-top: $height-end6 - $height-start6;
    height: $height-start6;
    transform: skewY(0deg);
    @include animation(loading6 1.5s infinite ease-in-out);
  }
}

@include keyframes(loading6) {
  25% {
    transform: skewY(25deg);;
  }
  50% {
    height: 100%;
    transform: skewY(0);
    margin-top: 0;
  }
  75% {
    transform: skewY(-25deg);;
  }
}

styles

<link href="http://codepen.io/kjbrum/pen/ILEdn" rel="stylesheet" />

Wavy Loading Animations.markdown

Wavy Loading Animations

Messing around with loading ideas using just CSS3 animations.

Forked from Kyle Brumm's Pen Wavy Loading Animations.

A Pen by Captain Anonymous on CodePen.

License.