From e2dad463f60a1271a9b8f3d2b1fff90690c3d9aa Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Sat, 11 Jul 2026 20:05:20 +0000
Subject: [PATCH] feat: reduce now playing animation #500

---
 src/client/index-next.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/client/index-next.css b/src/client/index-next.css
index aeb34e5d..40279bad 100644
--- a/src/client/index-next.css
+++ b/src/client/index-next.css
@@ -52,8 +52,38 @@
 .chakra-stack .MuiLinearProgress-bar2 {
       background-color: var(--chakra-colors-color-palette-500) !important;
 }
+
+/** high animation **/
+
+/* .chakra-stack .MuiLinearProgress-indeterminate {
+      background-color: var(--chakra-colors-color-palette-500) !important;
+} */
+
+
+/** low animation **/
+
+@keyframes slide { to { background-position: 26px 0; } }
 .chakra-stack .MuiLinearProgress-indeterminate {
       background-color: var(--chakra-colors-color-palette-500) !important;
+      background: linear-gradient(45deg,
+      #fff 25%,
+      #71717a 25%,
+      #71717a 50%,
+      #fff 50%,
+      #fff 75%,
+      #71717a 75%);
+      background: linear-gradient(45deg, 
+      var(--chakra-colors-color-palette-700) 25%,
+      var(--chakra-colors-color-palette-400) 25%,
+      var(--chakra-colors-color-palette-400) 50%,
+      var(--chakra-colors-color-palette-700) 50%,
+      var(--chakra-colors-color-palette-700) 75%,
+      var(--chakra-colors-color-palette-400) 75%);
+      background-size: 25px 26px;
+      animation: slide 3s linear infinite;
+}
+.chakra-stack .MuiLinearProgress-indeterminate .MuiLinearProgress-bar1,.chakra-stack .MuiLinearProgress-indeterminate .MuiLinearProgress-bar2  {
+      display: none;
 }
 .chakra-stack .MuiLinearProgress-root {
       height: 8px;
-- 
2.51.2