Skip to content

Instantly share code, notes, and snippets.

@nixbytes

nixbytes/css-audio-playing-animation.markdown

Last active November 21, 2019 01:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nixbytes/a2fabf5f2b04120faa21b2eaa5389a04 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nixbytes/a2fabf5f2b04120faa21b2eaa5389a04 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Audio playing animation
Raw
index.html
<div class="playing">
<span class="playing__bar playing__bar1"></span>
<span class="playing__bar playing__bar2"></span>
<span class="playing__bar playing__bar3"></span>
</div>
Raw
style.scss
.playing {
background: rgba(255,255,255,.1);
width: 3rem;
height: 3rem;
border-radius: .3rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: .5rem;
box-sizing: border-box;
}
.playing__bar {
display: inline-block;
background: white;
width: .5rem;
height: 100%;
animation: up-and-down 1.5s ease infinite alternate;
}
.playing__bar1 {
height: 60%;
}
.playing__bar2 {
height: 30%;
animation-delay: -2.4s;
}
.playing__bar3 {
height: 75%;
animation-delay: -3.7s;
}
@keyframes up-and-down {
10% {
height: 30%;
}
30% {
height: 100%;
}
60% {
height: 50%;
}
80% {
height: 75%;
}
100% {
height: 20%;
}
}
body {
background: #222;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment