The progress circle component displays a visual representation of progress in the form of a circle. It is useful for showing the progress of a task in a compact, easy-to-understand manner.
Example
Shows circular progress indication.
code
<script type="module">
import '@blueprintui/components/include/progress-circle.js';
</script>
<div bp-layout="inline gap:xs">
<bp-progress-circle value="75"></bp-progress-circle>
<bp-progress-circle value="75" status="accent"></bp-progress-circle>
<bp-progress-circle value="75" status="success"></bp-progress-circle>
<bp-progress-circle value="75" status="warning"></bp-progress-circle>
<bp-progress-circle value="75" status="danger"></bp-progress-circle>
</div>Progress Circle Loading
Demonstrates circular loading spinner animation.
code
<div bp-layout="inline gap:xs">
<bp-progress-circle></bp-progress-circle>
<bp-progress-circle status="accent"></bp-progress-circle>
<bp-progress-circle status="success"></bp-progress-circle>
<bp-progress-circle status="warning"></bp-progress-circle>
<bp-progress-circle status="danger"></bp-progress-circle>
</div>Install
NPM
// npm package
import '@blueprintui/components/include/progress-circle.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/progress-circle.js/+esm';
</script>Accessibility
- The progress circle should be visually accessible, with clear, contrasting colors.
- The progress percentage should be indicated to assistive technologies, such as screen readers.
- The label accompanying the progress circle should also be accessible to assistive technologies.
bp-progress-circle
Properties
| Name | Types | Description |
|---|---|---|
i18n | Provides internationalization strings for translated text content | |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type affecting color and semantic meaning |
value | number | Defines the current progress value from 0 to 100 |
line | number | Controls the stroke width of the progress circle ring |
size | 'sm' | 'md' | 'lg' | Determines the size variant of the component for different visual hierarchies |
Attributes
| Name | Types | Description |
|---|---|---|
i18n | Provides internationalization strings for translated text content | |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type affecting color and semantic meaning |
value | number | Defines the current progress value from 0 to 100 |
line | number | Controls the stroke width of the progress circle ring |
size | 'sm' | 'md' | 'lg' | Determines the size variant of the component for different visual hierarchies |
CSS Properties
| Name | Types | Description |
|---|---|---|
--ring-opacity | ||
--ring-color | ||
--fill-color | ||
--fill-speed | ||
--size |