Messing around with loading ideas using just CSS3 animations.
A Pen by Shawn Sandy on CodePen.
<div class="header"> | |
<h1>Wavy Loading Animations</h1> | |
<h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4> | |
</div> | |
<div class="shaft-load"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load2"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load3"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load4"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load5"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load6"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load7"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load8"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load9"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load10"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> | |
<div class="shaft-load11"> | |
<div class="shaft1"></div> | |
<div class="shaft2"></div> | |
<div class="shaft3"></div> | |
<div class="shaft4"></div> | |
<div class="shaft5"></div> | |
<div class="shaft6"></div> | |
<div class="shaft7"></div> | |
<div class="shaft8"></div> | |
<div class="shaft9"></div> | |
<div class="shaft10"></div> | |
</div> |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300); | |
@function random-color($min: 0, $max: 255, $alpha: 1, $red: null, $green: null, $blue: null) { | |
@if $min < 0 { | |
$min: -1; | |
} @else { | |
$min: $min - 1; | |
} | |
@if $max > 255 { | |
$max: 256; | |
} @else { | |
$max: $max + 1; | |
} | |
$range: $max - $min; | |
@if not $red { $red: random($range) + $min; } | |
@if not $green { $green: random($range) + $min; } | |
@if not $blue { $blue: random($range) + $min; } | |
@return rgba($red, $green, $blue, $alpha); | |
} | |
// ------------------------------------------------------ | |
$primary: random-color($min: 100, $max: 200); | |
$primary-light: lighten($primary, 25%); | |
$primary-dark: darken($primary, 25%); | |
$black: #333333; | |
$bg-color: #eeeeee; | |
$max-width: 800px; | |
html { | |
font-family: 'Open Sans', Helvetica, arial, sans-serif; | |
text-align: center; | |
background-color: $bg-color; | |
color: $black; | |
*, | |
*:before, | |
*:after { | |
@include box-sizing(border-box); | |
} | |
} | |
h1, h2, h3, | |
h4, h5, h6 { | |
text-align: center; | |
font-family: 'Raleway', 'Open Sans', sans-serif; | |
} | |
a { | |
color: $black; | |
text-decoration: none; | |
} | |
// ------------------------------------------------------ | |
/* Universal styling */ | |
[class^="shaft-load"] { | |
margin: 50px auto; | |
@include size(60px, 30px); | |
> div { | |
float: left; | |
background: $primary-dark; | |
height: 100%; | |
width: 5px; | |
margin-right: 1px; | |
display: inline-block; | |
} | |
.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 */ | |
$shaft1: random-color($min: 100, $max: 200); | |
$shaft1-dark: darken($shaft1, 25%); | |
.shaft-load { | |
> div { | |
background-color: $shaft1-dark; | |
@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)); | |
background-color: $shaft1; | |
} | |
} | |
/* Shaft 2 */ | |
$shaft2: random-color($min: 100, $max: 200); | |
$shaft2-dark: darken($shaft2, 25%); | |
.shaft-load2 { | |
> div { | |
background-color: $shaft2-dark; | |
@include animation(loading2 1.5s infinite ease-in-out); | |
@include transform(scaleY(0.05) translateX(-5px)); | |
} | |
} | |
@include keyframes(loading2) { | |
10% { | |
background: $shaft2; | |
} | |
15% { | |
@include transform(scaleY(1.2) translateX(10px)); | |
background: $shaft2; | |
} | |
90%, 100% { | |
@include transform(scaleY(0.05) translateX(-5px)); | |
} | |
} | |
/* Shaft 3 */ | |
$shaft3: random-color($min: 100, $max: 200); | |
$shaft3-dark: darken($shaft3, 25%); | |
.shaft-load3 { | |
position: relative; | |
@include square(100px); | |
> div { | |
background: transparent; | |
border: 4px solid transparent; | |
border-color: transparent transparent transparent $shaft3-dark; | |
@include border-radius(100%); | |
@include centerer; | |
@include transform( translate(-50%, -50%) rotate(0)); | |
@include animation(loading3 2s infinite ease-in-out); | |
} | |
.shaft1 { @include animation-delay(0.1s); @include square(20px); } | |
.shaft2 { @include animation-delay(0.2s); @include square(25px); } | |
.shaft3 { @include animation-delay(0.3s); @include square(30px); } | |
.shaft4 { @include animation-delay(0.4s); @include square(35px); } | |
.shaft5 { @include animation-delay(0.5s); @include square(40px); } | |
.shaft6 { @include animation-delay(0.6s); @include square(45px); } | |
.shaft7 { @include animation-delay(0.7s); @include square(50px); } | |
.shaft8 { @include animation-delay(0.8s); @include square(55px); } | |
.shaft9 { @include animation-delay(0.9s); @include square(60px); } | |
.shaft10 { @include animation-delay(1.0s); @include square(65px); } | |
} | |
@include keyframes(loading3) { | |
50% { | |
@include transform( translate(-50%, -50%) rotate(360deg)); | |
border-color: transparent transparent rgba($shaft3, 0.10) $shaft3; | |
} | |
75% { | |
border-color: rgba($shaft3, 0.10) transparent transparent $shaft3; | |
} | |
} | |
/* Shaft 4 */ | |
$shaft4: random-color($min: 100, $max: 200); | |
$shaft4-dark: darken($shaft4, 25%); | |
.shaft-load4 { | |
margin-top: 80px; | |
width: 80px; | |
> div { | |
background-color: $shaft4-dark; | |
margin-right: 0; | |
@include animation(loading4 1.5s infinite ease-in-out); | |
width: 8px; | |
@include opacity(0); | |
@include transform(scaleY(0.1)); | |
} | |
} | |
@include keyframes(loading4) { | |
50% { | |
@include transform(scaleY(1.5)); | |
background: $shaft4; | |
@include opacity(100); | |
} | |
} | |
/* Shaft 5 */ | |
$shaft5: random-color($min: 100, $max: 200); | |
$shaft5-dark: darken($shaft5, 25%); | |
$height-start5: 5px; | |
$height-end5: 40px; | |
.shaft-load5 { | |
height: $height-end5; | |
> div { | |
background-color: $shaft5-dark; | |
@include relative(null, null, 0); | |
margin-top: $height-end5 - $height-start5; | |
height: $height-start5; | |
@include animation(loading5 1.5s infinite ease-in-out); | |
} | |
.shaft1 { @include animation-delay(-1.5s); } | |
.shaft2 { @include animation-delay(-1.4s); } | |
.shaft3 { @include animation-delay(-1.3s); } | |
.shaft4 { @include animation-delay(-1.2s); } | |
.shaft5 { @include animation-delay(-1.1s); } | |
.shaft6 { @include animation-delay(-1.0s); } | |
.shaft7 { @include animation-delay(-0.9s); } | |
.shaft8 { @include animation-delay(-0.8s); } | |
.shaft9 { @include animation-delay(-0.7s); } | |
.shaft10 { @include animation-delay(-0.6s); } | |
.shaft11 { @include animation-delay(-0.5s); } | |
} | |
@include keyframes(loading5) { | |
50% { | |
height: 100%; | |
margin-top: 0; | |
background: $shaft5; | |
} | |
} | |
/* Shaft 6 */ | |
$shaft6: random-color($min: 100, $max: 200); | |
$shaft6-dark: darken($shaft6, 25%); | |
$height-start6: 3px; | |
$height-end6: 40px; | |
.shaft-load6 { | |
height: $height-end6; | |
width: 90px; | |
overflow: hidden; | |
> div { | |
background-color: $shaft6-dark; | |
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; | |
background: $shaft6; | |
} | |
75% { | |
transform: skewY(-25deg);; | |
} | |
} | |
/* Shaft 7 */ | |
$shaft7: random-color($min: 100, $max: 200); | |
$shaft7-dark: darken($shaft7, 25%); | |
.shaft-load7 { | |
> div { | |
background-color: $shaft7-dark; | |
height: 2px; | |
@include animation(loading7 1s infinite ease-in-out); | |
@include translateY(-10px); | |
} | |
} | |
@include keyframes(loading7) { | |
50% { | |
background: $shaft7; | |
@include translateY(10px); | |
} | |
} | |
/* Shaft 8 */ | |
$shaft8: random-color($min: 100, $max: 200); | |
$shaft8-dark: darken($shaft8, 25%); | |
.shaft-load8 { | |
width: 92px; | |
> div { | |
background-color: $shaft8-dark; | |
height: 5px; | |
margin-right: 0; | |
@include animation(loading8 1s infinite ease-in-out); | |
} | |
} | |
@include keyframes(loading8) { | |
80% { | |
background: $shaft8; | |
margin-right: 5px; | |
@include translateX(-10px); | |
} | |
} | |
/* Shaft 9 */ | |
$shaft9: random-color($min: 100, $max: 200); | |
$shaft9-dark: darken($shaft9, 25%); | |
.shaft-load9 { | |
position: relative; | |
@include square(100px); | |
> div { | |
background: transparent; | |
@include opacity(0); | |
border: 1px solid $shaft9-dark; | |
@include border-radius(100%); | |
@include centerer; | |
@include translate(-50%, -50%); | |
@include animation(loading9 1.2s infinite ease-in-out); | |
} | |
.shaft1 { | |
background: $shaft9; | |
@include animation-delay(0.1s); | |
@include square(3px); | |
} | |
.shaft2 { @include animation-delay(0.2s); @include square(10px); } | |
.shaft3 { @include animation-delay(0.3s); @include square(20px); } | |
.shaft4 { @include animation-delay(0.4s); @include square(30px); } | |
.shaft5 { @include animation-delay(0.5s); @include square(40px); } | |
.shaft6 { @include animation-delay(0.6s); @include square(50px); } | |
.shaft7 { @include animation-delay(0.7s); @include square(60px); } | |
.shaft8 { @include animation-delay(0.8s); @include square(70px); } | |
.shaft9 { @include animation-delay(0.9s); @include square(80px); } | |
.shaft10 { @include animation-delay(1.0s); @include square(90px); } | |
} | |
@include keyframes(loading9) { | |
25% { | |
border-color: $shaft9; | |
@include opacity(100); | |
} | |
50% { | |
@include opacity(0); | |
} | |
} | |
/* Shaft 10 */ | |
$shaft10: random-color($min: 100, $max: 200); | |
$shaft10-dark: darken($shaft10, 25%); | |
.shaft-load10 { | |
> div { | |
background-color: $shaft10-dark; | |
@include animation(loading10 1.5s infinite ease-in-out); | |
@include transform(scaleY(0.05)); | |
} | |
.shaft1 { height: 100%; } | |
.shaft2 { height: 110%; } | |
.shaft3 { height: 120%; } | |
.shaft4 { height: 130%; } | |
.shaft5 { height: 140%; } | |
.shaft6 { height: 150%; } | |
.shaft7 { height: 160%; } | |
.shaft8 { height: 170%; } | |
.shaft9 { height: 180%; } | |
.shaft10 { height: 190%; } | |
} | |
@include keyframes(loading10) { | |
50% { | |
@include transform(scaleY(1.2)); | |
background: $shaft10; | |
} | |
} | |
/* Shaft 11 */ | |
$shaft11: random-color($min: 100, $max: 200); | |
$shaft11-dark: darken($shaft11, 25%); | |
.shaft-load11 { | |
position: relative; | |
@include square(100px); | |
> div { | |
background: transparent; | |
border: 8px solid transparent; | |
border-color: rgba($shaft11-dark, 1) transparent; | |
@include border-radius(100%); | |
@include centerer; | |
@include transform( translate(-50%, -50%) rotate(0)); | |
@include animation(loading11 2s infinite ease-in-out); | |
} | |
.shaft1 { @include animation-delay(0.1s); @include square(20px); } | |
.shaft2 { @include animation-delay(0.2s); @include square(25px); } | |
.shaft3 { @include animation-delay(0.3s); @include square(35px); } | |
.shaft4 { @include animation-delay(0.4s); @include square(45px); } | |
.shaft5 { @include animation-delay(0.5s); @include square(55px); } | |
.shaft6 { @include animation-delay(0.6s); @include square(65px); } | |
.shaft7 { @include animation-delay(0.7s); @include square(75px); } | |
.shaft8 { @include animation-delay(0.8s); @include square(80px); } | |
.shaft9 { @include animation-delay(0.9s); @include square(85px); } | |
.shaft10 { @include animation-delay(1.0s); @include square(90px); } | |
} | |
@include keyframes(loading11) { | |
50% { | |
@include transform( translate(-50%, -50%) rotate(360deg)); | |
border-color: rgba($shaft11, 1) transparent; | |
} | |
} |
<link href="https://codepen.io/kjbrum/pen/ILEdn" rel="stylesheet" /> |
Messing around with loading ideas using just CSS3 animations.
A Pen by Shawn Sandy on CodePen.