Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 13:13:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Replace CPU-hogging anim with GIF (fixes #481)

Browse source
This commit is contained in:
An Phan 2016-11-17 15:13:56 +08:00
parent 43467e3393
commit d753811045
No known key found for this signature in database
GPG key ID: 05536BB4BCDC02A2
2 changed files with 1 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
resources/assets/img/bars.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

31
resources/assets/js/components/shared/sound-bar.vue
View file

@ -1,6 +1,6 @@
<template>
<div id="bars">
<div class="bar" v-for="n in 5"/>
<img src="/public/img/bars.gif" alt="Sound bars" height="13" width="auto">
</div>
</template>
@ -46,40 +46,11 @@ export default {
</script>
<style lang="sass">
// Some fancy bars for an eye-candy effect.
// Credits: http://codepen.io/johnheiner/pen/JdRybK and http://codepen.io/jackrugile/pres/CkAbG
@keyframes sound {
0% {
opacity: .15;
height: 1px;
}
100% {
opacity: 1;
height: 13px;
}
}
#bars {
width: 28px;
height: 13px;
position: relative;
display: inline-block;
backface-visibility: hidden;
.bar {
background: #666;
bottom: 1px;
position: absolute;
width: 3px;
animation: sound 0ms -800ms linear infinite alternate;
backface-visibility: hidden;
will-change: opacity, height;
}
.bar:nth-child(1) { left: 1px; background: #754fa0; animation-duration: 474ms; }
.bar:nth-child(2) { left: 5px; background: #09b7bf; animation-duration: 433ms; }
.bar:nth-child(3) { left: 9px; background: #90d36b; animation-duration: 407ms; }
.bar:nth-child(4) { left: 13px; background: #ed1b72; animation-duration: 458ms; }
.bar:nth-child(5) { left: 17px; background: #f2d40d; animation-duration: 400ms; }
}
</style>