Pyro

Appearance

Progressbar ​

RC 0.8Kb
js
import 'pyro/progressbar'
Preview Code Stackblitz

Usage ​

html
<pyro-progressbar value="4" max="10" text="Loading..."></pyro-progressbar>

Variations ​

Props ​

ts
interface ProgressbarProps {
  /** Current value */
  value: number;
  /** Max value */
  max: number;
  /** Text in the middle of the progressbar bar */
  text?: string;
  /** Aria label */
  'aria-label': string;
}

Slots ​

ts
/**
 * @slot text - Optional content in middle
 */

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * @prop {--pyro-progressbar-accent-color = --pyro-accent-color} - fill `color`
 * @prop {--pyro-progressbar-background = --pyro-surface-color} - background `color`
 * @prop {--pyro-progressbar-text-color = --pyro-text-color-on-surface} - text `color`
 * @prop {--pyro-progressbar-border = --pyro-border} - `border`
 * @prop {--pyro-progressbar-border-radius = --pyro-border-radius} - `border-radius`
 * @prop {--pyro-progressbar-height = 1em} - `height`
 */