lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Progress Circle

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

// 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

NameTypesDescription
i18nset default aria/i18n strings
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
valuenumber
linenumber
size'sm' | 'md' | 'lg'

Attributes

NameTypesDescription
i18nset default aria/i18n strings
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state
valuenumber
linenumber
size'sm' | 'md' | 'lg'

CSS Properties

NameTypesDescription
--ring-opacity
--ring-color
--fill-color
--fill-speed
--size