@fylgja/form-extend/meter-progress.css

The Fylgja form-extend component

@keyframes progress-loading {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}
meter,
progress {
  --track-height: 1ex;
  --track-color: color-mix(in srgb, currentcolor 24%, canvas);
  --track-radius: 0.4em;
  appearance: none;
  block-size: var(--track-height, 1ex);
  inline-size: 100%;
  border-radius: var(--track-radius);
  background: var(--track-color);
  vertical-align: middle;
}
@media (forced-colors: active) {
  meter,
  progress {
    border: 1px solid;
  }
}

meter::-webkit-meter-bar,
progress::-webkit-progress-bar {
  align-self: auto;
  border: transparent;
  background: inherit;
}

progress {
  --_transition: inline-size 0.2s, block-size 0.2s;
  --progress-value-radius: var(--track-radius);
  --track-height: 1.8ex;
  --fill: var(--brand, currentcolor);
}
@media (forced-colors: active) {
  progress {
    --fill: currentcolor;
  }
}
progress::-webkit-progress-value {
  border-radius: var(--progress-value-radius);
  background-color: var(--fill);
  transition: var(--_transition);
  forced-color-adjust: none;
}
progress::-moz-progress-bar {
  border-radius: var(--progress-value-radius);
  background-color: var(--fill);
  transition: var(--_transition);
  forced-color-adjust: none;
}
@media (prefers-reduced-motion: no-preference) {
  progress:indeterminate {
    background: var(--track-color) linear-gradient(var(--fill), var(--fill)) 0 0/50% no-repeat;
    animation: 5s infinite linear progress-loading;
  }
}

meter {
  --success: #107c10;
  --warning: #ffb900;
  --error: #e00;
  overflow: hidden;
}
meter::-webkit-meter-inner-element {
  position: relative;
  display: block;
}
meter::-webkit-meter-optimum-value {
  background: var(--success);
}
meter::-webkit-meter-suboptimum-value {
  background: var(--warning);
}
meter::-webkit-meter-even-less-good-value {
  background: var(--error);
}
meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--success);
}
meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--warning);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--error);
}