Skip to content

Instantly share code, notes, and snippets.

@shawnsandy

shawnsandy/index.html

Created April 10, 2018 02:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shawnsandy/35fce45d1ed3cfddd2c13c9a0a995eec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shawnsandy/35fce45d1ed3cfddd2c13c9a0a995eec to your computer and use it in GitHub Desktop.
Download ZIP
Wavy Loading Animations
Raw
index.html
<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>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
@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;
}
}
Raw
styles
<link href="https://codepen.io/kjbrum/pen/ILEdn" rel="stylesheet" />
Raw
wavy-loading-animations.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment