Skip to content

[EuiProgress] Missing animation on progress bar update - regression #7523

@prcdpr

Description

@prcdpr

Describe the bug
I've recently upgraded from EUI v37 to v93.
It seems that in the meantime, the animation for EuiProgress was lost.
I suspect: 21a24c3

src/components/progress/_progress.scss had

  &::-webkit-progress-value {
    transition: width $euiAnimSpeedNormal linear;
  }

  &::-moz-progress-bar {
    transition: width $euiAnimSpeedNormal linear;
  }

Impact and severity
Low impact.
Workaround:

.euiProgress[class*="euiProgress-native"]::-webkit-progress-value {
  transition: width 250ms linear;
}

.euiProgress[class*="euiProgress-native"]::-moz-progress-bar {
  transition: width 250ms linear;
}

Environment and versions

  • EUI version: v93
  • Browser: Chrome, Firefox

To Reproduce
Steps to reproduce the behavior:

  1. Open https://eui.elastic.co/#/display/progress#progress-with-values
  2. Click Toggle progress

Expected behavior
When updated, progress bar should animate increments.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions