Repository navigation
feat(gui): add a subtle modern sheen animation to the progress bar - #1111
Merged
Merged
Conversation
CSS-only ::after on .progress-bar: evenly-spaced soft diagonal highlights that drift slowly across the fill. Animates background-position only, so the JS-driven width transition is untouched; the 16px period and 16/cos45 shift make the loop seamless. Honors prefers-reduced-motion. No HTML/JS changes.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a CSS-only “sheen” animation overlay to the GUI progress bar fill to give it a subtle modern highlight effect, while keeping the JS-driven width transition unchanged and honoring prefers-reduced-motion.
Changes:
- Make
.progress-bara positioning context for an animated::afteroverlay. - Add a repeating diagonal highlight pattern that animates via
background-position. - Disable the animation under
@media (prefers-reduced-motion: reduce).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
⏱️ Benchmark run finished in 0m 49s 📈 Compared against baseline: 18s time, 1005 MB memory 🟢 Generation time is unchanged. 📅 Last benchmark: 2026-06-16 14:41:25 UTC You can retrigger the benchmark by commenting |
Reset will-change to auto under prefers-reduced-motion so the element isn't left promoted while idle, and use a more precise seamless shift (22.627px).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
CSS-only ::after on .progress-bar: evenly-spaced soft diagonal highlights that drift slowly across the fill. Animates background-position only, so the JS-driven width transition is untouched; the 16px period and 16/cos45 shift make the loop seamless. Honors prefers-reduced-motion. No HTML/JS changes.