add loadbar sound when playing a song

This commit is contained in:
Jason Chen 2022-01-22 23:12:29 -08:00
parent ee1da31a94
commit 2b8b0ce6d8
2 changed files with 55 additions and 6 deletions

View file

@ -3633,6 +3633,52 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background-repeat: no-repeat;
}
/* CSS.gg
*/
@keyframes load-bar {
10% {box-shadow: inset 0 -4px 0}
20% {box-shadow: inset 0 -10px 0}
30% {box-shadow: inset 0 -12px 0}
40% {box-shadow: inset 0 -8px 0}
50% {box-shadow: inset 0 -4px 0}
60% {box-shadow: inset 0 -6px 0}
80% {box-shadow: inset 0 -12px 0}
90% {box-shadow: inset 0 -6px 0}
to {box-shadow: inset 0 -2px 0}
}
.loadbar-sound,
.loadbar-sound::after,
.loadbar-sound::before {
animation: load-bar 1.3s ease infinite alternate;
box-sizing: border-box;
width: 3px;
height: 28px;
box-shadow: inset 0 -12px 0;
}
.loadbar-sound {
margin-left: 22px;
margin-top: -16px;
position: relative;
transform: scale(var(--load-bar,1));
color: var(--keyColor);
display: block;
}
.loadbar-sound::after,
.loadbar-sound::before {
content: "";
position: absolute;
bottom: 0
}
.loadbar-sound::before {
left: -4.5px;
animation-delay: -2.4s
}
.loadbar-sound::after {
right: -4.2px;
animation-delay: -3.7s
}
.isLibrary {
flex: 0 0 auto;
width: 40px;