diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css index 0ee6bb8..6a3737d 100644 --- a/assets/stylesheets/App.css +++ b/assets/stylesheets/App.css @@ -973,10 +973,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton { @keyframes h-progress-macos-wave { 0% { - transform: translateX(-120%); + transform: translateX(0); } 100% { - transform: translateX(120%); + /* One gradient period (40cqw of a 200cqw-wide element) for a seamless loop */ + transform: translateX(20%); } } @@ -1000,6 +1001,8 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton { flex: 1; overflow: hidden; vertical-align: middle; + /* Lets the wave size itself against the full track via cqw units */ + container-type: inline-size; } .h-progress-bg, @@ -1014,22 +1017,33 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton { inset-inline-start: 0; } -.h-progress-bg-active::after { - content: ''; +/* Mask that clips the wave to the filled portion of the bar. Its width + tracks the fill, while the wave inside keeps a constant width so Safari + doesn't restart/freeze the animation when progress updates. */ +.h-progress-bg-mask { position: absolute; - inset: 0; - border-radius: inherit; + inset-block: 0; + inset-inline-start: 0; + overflow: hidden; pointer-events: none; - background: linear-gradient( + transition: width 0.1s cubic-bezier(0.78, 0.14, 0.15, 0.86); +} + +.h-progress-bg-wave { + position: absolute; + inset-block: 0; + /* Constant width relative to the full track (.h-progress-inner), + independent of the mask's changing width. Starts one period early so + the pattern always covers the track while sliding right. */ + inset-inline-start: -40cqw; + width: 200cqw; + background: repeating-linear-gradient( 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.08) 18%, - rgba(255, 255, 255, 0.42) 50%, - rgba(255, 255, 255, 0.08) 82%, - rgba(255, 255, 255, 0) 100% + rgba(255, 255, 255, 0) 0, + rgba(255, 255, 255, 0.35) 20cqw, + rgba(255, 255, 255, 0) 40cqw ); - width: 55%; - animation: h-progress-macos-wave 1.6s ease-in-out infinite; + animation: h-progress-macos-wave 1s linear infinite; } .h-progress-text { diff --git a/src/components/Dashboard/common/HProgress.jsx b/src/components/Dashboard/common/HProgress.jsx index a46156e..55e61e6 100644 --- a/src/components/Dashboard/common/HProgress.jsx +++ b/src/components/Dashboard/common/HProgress.jsx @@ -176,12 +176,7 @@ const HProgress = forwardRef(function HProgress( }} >