81 lines
1.4 KiB
Svelte
81 lines
1.4 KiB
Svelte
<!-- Animated equalizer icon
|
|
Source: https://codepen.io/virpo/details/YzKWWPW
|
|
Author: Peter Hraska
|
|
MIT License
|
|
-->
|
|
<script lang="ts">
|
|
let playing = true;
|
|
</script>
|
|
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="inline fill-primary"
|
|
class:stop={!playing}
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<rect class="eq-bar eq-bar--1" x="4" y="4" width="3.7" height="8" />
|
|
<rect class="eq-bar eq-bar--2" x="10.2" y="4" width="3.7" height="16" />
|
|
<rect class="eq-bar eq-bar--3" x="16.3" y="4" width="3.7" height="11" />
|
|
</svg>
|
|
|
|
<style lang="postcss">
|
|
.eq-bar {
|
|
transform: scale(1, -1) translate(0, -24px);
|
|
}
|
|
|
|
.stop .eq-bar {
|
|
animation-name: none;
|
|
height: 2px;
|
|
}
|
|
|
|
.eq-bar--1 {
|
|
animation-name: short-eq;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.eq-bar--2 {
|
|
animation-name: tall-eq;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.17s;
|
|
}
|
|
|
|
.eq-bar--3 {
|
|
animation-name: short-eq;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.34s;
|
|
}
|
|
|
|
@keyframes short-eq {
|
|
0% {
|
|
height: 8px;
|
|
}
|
|
|
|
50% {
|
|
height: 4px;
|
|
}
|
|
|
|
100% {
|
|
height: 8px;
|
|
}
|
|
}
|
|
|
|
@keyframes tall-eq {
|
|
0% {
|
|
height: 16px;
|
|
}
|
|
|
|
50% {
|
|
height: 6px;
|
|
}
|
|
|
|
100% {
|
|
height: 16px;
|
|
}
|
|
}
|
|
</style>
|