Wavy Loading Animations
How do I make an wavy loading animations?
Messing around with loading ideas using just CSS3 animations.. What is a wavy loading animations? How do you make a wavy loading animations? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.
Wavy Loading Animations Previews
Wavy Loading Animations - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wavy Loading Animations</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/iledn.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Wavy Loading Animations - Script Codes CSS Codes
@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; }
}
| Developer | Kyle Brumm |
| Username | kjbrum |
| Uploaded | January 07, 2023 |
| Rating | 4.5 |
| Size | 12,777 Kb |
| Views | 8,096 |
Do you need developer help for Wavy Loading Animations?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Kyle Brumm (kjbrum) Script Codes
| Name | Size |
| Stacked Cards Hover Effects | 4,514 Kb |
| Dotted Menu Concept | 3,327 Kb |
| Stylish Brand Buttons | 8,832 Kb |
| Button Hover Effects | 8,856 Kb |
| CSS Only Dropdown | 2,655 Kb |
| Simple Tabs Concept | 4,038 Kb |
| Vue.js Lazy Loading | 3,620 Kb |
| Simple Accordion Concept | 4,955 Kb |
| CSS3 Stylish Checkboxes | 2,624 Kb |
| Line Button Hover Effects | 3,930 Kb |
Create amazing Facebook ads with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Xand0r | Xand0r | 1,928 Kb |
| 12 DAYS OF XMAS | Proto78 | 2,313 Kb |
| Chuck Norris Background | Manz | 1,967 Kb |
| No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
| Getting Started | Viblast | 1,500 Kb |
| Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
| CSS3 Snow Animation | NickyCDK | 1,695 Kb |
| Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
| Pure CSS Menu | Bronsrobin | 3,321 Kb |
| 3D Text in Sass | Bookcasey | 2,766 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!