add loadbar sound when playing a song

src/renderer/style.less

@@ -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;

src/renderer/views/components/mediaitem-list-item.ejs

@@ -14,12 +14,15 @@
          @mouseleave="showInLibrary = false"
          :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
         <template v-if="isVisible">
-            <div class="isLibrary" :style="{opacity: (showInLibrary ? 1 : 0)}" v-if="showLibraryStatus == true">
+            <div class="isLibrary"" v-if="showLibraryStatus == true">
-                <button @click="addToLibrary()"
+                <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
-                        v-if="!addedToLibrary">
+                    <button @click="addToLibrary()" v-if="!addedToLibrary">
-                    <div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
+                        <div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
-                </button>
+                    </button>
-                <button v-else style="opacity:0;">❤️</button>
+                </div>
+                <div v-if="app.mk.isPlaying && app.mk.nowPlayingItem._songId == item.attributes.playParams.id" :style="{display: (showInLibrary ? 'none' : 'block')}">
+                    <div class="loadbar-sound"></div>
+                </div>
             </div>
             <div class="artwork" v-if="showArtwork == true">
                 <mediaitem-artwork