Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save gourneau/b1d7f3125d8c3fb13fea to your computer and use it in GitHub Desktop.
Save gourneau/b1d7f3125d8c3fb13fea to your computer and use it in GitHub Desktop.
Wave loader animation
<div id="wave">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
html, body {
margin:0;
padding:0;
}
body {
background:#ee0f0f;
}
div#wave {
position:relative;
transform: rotate(-130deg);
margin-top:50vh;
text-align:center;
width:100px;
height:100px;
margin-left: auto;
margin-right: auto;
.line {
display:inline-block;
width:12px;
margin-right:3px;
background:#fff;
animation: wave 1.3s linear infinite;
&:nth-child(1) {
height:40px;
}
&:nth-child(2) {
height:30px;
animation-delay: -1.2s;
}
&:nth-child(3) {
height:20px;
animation-delay: -1.1s;
}
&:nth-child(4) {
height:10px;
animation-delay: -1.0s;
}
}
}
@keyframes wave {
0%, 60%, 100% {
transform: initial;
}
40% {
transform: translateY(-20px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment