[Progress bars]: Bundle theme styles with component #15720
Conversation
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
- fix start/edn gradient variables - fix rtl indeterminate animation
…lt(-end/-start) exists in case somebody used it
desig9stein
added
styling
❌ status: awaiting-test
adrianptrv
added
✅ status: verified
simeonoff
reviewed
Apr 25, 2025
Comment on lines
+14
to
+132
| } | ||
|
|
||
| @keyframes igx-indeterminate-accordion-rtl { | ||
| 0% { | ||
| stroke-dashoffset: calc(#{$circumference} * -2); | ||
| stroke-dasharray: calc(#{$circumference} * 9 / 10); | ||
| } | ||
|
|
||
| 100% { | ||
| stroke-dashoffset: calc(#{$circumference} * -2 / 5); | ||
| } | ||
| } | ||
|
|
||
| // Fluent: Circular progress animation for indeterminate state. | ||
| // Dynamically changes stroke-dasharray and rotates for a smooth spinning effect. | ||
| @keyframes igx-indeterminate-circular-fluent { | ||
| 0% { | ||
| // Start the stroke at the correct position by adjusting the dasharray and dashoffset | ||
| stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; | ||
| stroke-dashoffset: calc(-1 * #{$circumference} / 4); | ||
|
|
||
| // Start at 12 o'clock | ||
| transform: rotate(-90deg); | ||
| } | ||
|
|
||
| 50% { | ||
| stroke-dasharray: calc(#{$circumference} / 2), calc(#{$circumference} / 2); | ||
|
|
||
| // Adjust to keep starting point correct | ||
| stroke-dashoffset: calc(-1 * #{$circumference} / 4); | ||
|
|
||
| // Continue rotating smoothly | ||
| transform: rotate(360deg); | ||
| } | ||
|
|
||
| 100% { | ||
| stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; | ||
|
|
||
| // Reset properly | ||
| stroke-dashoffset: calc(-1 * #{$circumference} / 4); | ||
|
|
||
| // Complete the full rotation | ||
| transform: rotate(990deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes igx-indeterminate-circular-fluent-rtl { | ||
| 0% { | ||
| stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; | ||
|
|
||
| // Positive offset for opposite direction | ||
| stroke-dashoffset: calc(#{$circumference} / 4); | ||
| transform: rotate(90deg); | ||
| } | ||
|
|
||
| 50% { | ||
| stroke-dasharray: calc(#{$circumference} / 2), calc(#{$circumference} / 2); | ||
|
|
||
| // Positive offset for opposite direction | ||
| stroke-dashoffset: calc(#{$circumference} / 4); | ||
| transform: rotate(-360deg); | ||
| } | ||
|
|
||
| 100% { | ||
| stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; | ||
|
|
||
| // Positive offset for opposite direction | ||
| stroke-dashoffset: calc(#{$circumference} / 4); | ||
| transform: rotate(-990deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes igx-initial-dashoffset { | ||
| from { | ||
| /* Start with no progress (0%) */ | ||
| stroke-dashoffset: #{$circumference}; | ||
| } | ||
|
|
||
| to { | ||
| stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference}); | ||
| } | ||
| } | ||
|
|
||
| // Generic animations | ||
| @keyframes igc-initial-counter { | ||
| from { | ||
| --_progress-integer: 0; | ||
| --_progress-fraction: 0; | ||
| } | ||
| } | ||
|
|
||
| @keyframes igx-rotate-center { | ||
| 0% { | ||
| transform: rotate(0); | ||
| } | ||
|
|
||
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } |
There was a problem hiding this comment.
Put these in a separate file to clean this up a bit. Also make sure to put the keyframes in the base layer.
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.
Closes #15686
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)