Progresscircle

RC 1Kb

import 'pyro/progresscircle'

Preview Code Stackblitz

Usage

<pyro-progresscircle
  value="4" max="100" text="4%" style="width: 3em; height: 3em;">
</pyro-progresscircle>

Variations

Props

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

Slots

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

CSS prop theming

The

Full theming sheet

/**
 * @prop {--pyro-progresscircle-accent-color = --pyro-accent-color} - value `background`
 * @prop {--pyro-progresscircle-background = --pyro-surface-color} - background `background`
 * @prop {--pyro-progresscircle-text-color = --pyro-text-color-on-surface} - text `color`
 * @prop {--pyro-progresscircle-height = 1em} - `height`
 */