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
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
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
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 | | set default aria/i18n strings |
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
value | number | |
line | number | |
size | 'sm' | 'md' | 'lg' | |
Attributes
| Name | Types | Description |
|---|
i18n | | set default aria/i18n strings |
status | 'accent' | 'success' | 'warning' | 'danger' | determine the visual status state |
value | number | |
line | number | |
size | 'sm' | 'md' | 'lg' | |
CSS Properties
| Name | Types | Description |
|---|
--ring-opacity | | |
--ring-color | | |
--fill-color | | |
--fill-speed | | |
--size | | |