Progress

Source

• Progress.css

Example

Progress

<progress class="x-progress" value="25" max="100"></progress>

Meter

<meter class="x-progress accent-main" value="50" min="0" max="100" low="33" optimum="80" high="66"></meter>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/progress/props/default.css" layer(theme);
@import "winduum/src/components/progress/default.css" layer(utilities);
@import "winduum/src/components/progress/keyframes/default.css" layer(utilities);
@import "winduum/src/components/progress/lg.css" layer(utilities);
@import "winduum/src/components/progress/meter.css" layer(utilities);
@import "winduum/src/components/progress/sm.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-progress-block-size: 2.5rem;
    --x-progress-border-radius: var(--radius-md);
  }
}

Winduum CSS Code

winduum/src/components/progress/props/default.css

:root, :host {
  --x-progress-block-size: 1rem;
  --x-progress-border-radius: var(--radius-full);
}

winduum/src/components/progress/default.css

.x-progress {
  inline-size: var(--x-progress-inline-size, 100%);
  block-size: var(--x-progress-block-size);
  border-radius: var(--x-progress-border-radius);
  background-color:
    color-mix(
      in var(--x-progress-background-color-space, srgb),
      var(--x-progress-background-color, var(--color-accent)) var(--x-progress-background-color-opacity, 10%),
      var(--x-progress-background-color-mix, var(--color-body))
    );
  position: relative;
  overflow: clip;

  &::-moz-progress-bar {
    background-color: var(--x-progress-bar-background-color, var(--color-accent));
    transition: all var(--x-progress-transition-duration, 0.3s) var(--ease-in-out);
    border-radius: inherit;
  }

  &::-webkit-progress-bar {
    background-color: transparent;
    border-radius: inherit;
  }

  &::-webkit-progress-inner-element {
    border-radius: inherit;
  }

  &::-webkit-progress-value {
    background-color: var(--x-progress-bar-background-color, var(--color-accent));
    transition: all var(--x-progress-transition-duration, 0.3s) var(--ease-in-out);
    border-radius: inherit;
  }

  &:indeterminate {
    animation: var(--x-progress-indeterminate-animation-duration, 1s) var(--x-progress-indeterminate-animation-timing-function, linear) infinite move-indeterminate;
    background-image: linear-gradient(to right, var(--color-accent) 33.33%, transparent 0%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 150%;

    &::-moz-progress-bar {
      background-color: transparent;
    }
  }
}

winduum/src/components/progress/keyframes/default.css

@keyframes move-indeterminate {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

winduum/src/components/progress/lg.css

.x-progress:is(.lg) {
  --x-progress-block-size: 1.5rem;
}

winduum/src/components/progress/meter.css

.x-progress {
  &::-webkit-meter-bar {
    border: 0;
    background: transparent;
    border-radius: inherit;
  }

  &::-webkit-meter-inner-element {
    position: relative;
    display: block;
    border-radius: inherit;
  }

  &::-webkit-meter-optimum-value {
    background: var(--x-progress-meter-success-background, var(--color-success));
    border-radius: inherit;
  }

  &::-webkit-meter-suboptimum-value {
    background: var(--x-progress-meter-warning-background, var(--color-warning));
    border-radius: inherit;
  }

  &::-webkit-meter-even-less-good-value {
    background: var(--x-progress-meter-error-background, var(--color-error));
    border-radius: inherit;
  }

  &:-moz-meter-optimum::-moz-meter-bar {
    background: var(--x-progress-meter-success-background, var(--color-success));
    border-radius: inherit;
  }

  &:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--x-progress-meter-warning-background, var(--color-warning));
    border-radius: inherit;
  }

  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--x-progress-meter-error-background, var(--color-error));
    border-radius: inherit;
  }
}

winduum/src/components/progress/sm.css

.x-progress:is(.sm) {
  --x-progress-block-size: 0.5rem;
}