@3mo/circular-progress
v0.3.1
Published
A web component for circular progress indicators that show a value or spin indefinitely, built on Material Web.
Readme
Circular Progress
A web component for circular progress indicators that show a value or spin indefinitely, built on Material Web.
A circular indicator of progress, or of activity of unknown length.
Installation
npm install @3mo/circular-progressimport '@3mo/circular-progress'Usage
<mo-circular-progress></mo-circular-progress>Examples
- Progress —
progressfrom0to1fills the circle; without it, the indicator spins for work of unknown length. - Size — The indicator is 48px square by default and scales with
widthandheight. - Custom Properties —
--mo-circular-progress-accent-colorcolors the indicator and--mo-circular-progress-track-colorthe track behind it.
API
mo-circular-progress
Properties
| Name | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| progress | progress | number \| undefined | | The progress from 0 to 1. Unset to display an indeterminate progress indicator. |
CSS custom properties
| Name | Description |
| --- | --- |
| --mo-circular-progress-accent-color | The color of the indicator, the accent color by default. |
| --mo-circular-progress-track-color | The color of the track behind the indicator, transparent by default. |
Links
License
MIT © 3MO GmbH
