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 Bar

The progress bar component displays the progress of a task, usually on a scale from 0 to 100%. It can be used to show the progress of a download, upload, form completion, or any other process that can be represented as a percentage.

Example

code
<script type="module">
  import '@blueprintui/components/include/progress-bar.js';
</script>

<div bp-layout="block gap:xs">
  <bp-progress-bar value="75"></bp-progress-bar>
  <bp-progress-bar value="75" status="accent"></bp-progress-bar>
  <bp-progress-bar value="75" status="success"></bp-progress-bar>
  <bp-progress-bar value="75" status="warning"></bp-progress-bar>
  <bp-progress-bar value="75" status="danger"></bp-progress-bar>
</div>

Progress Bar Indeterminate

code
<div bp-layout="block gap:xs">
  <bp-progress-bar></bp-progress-bar>
  <bp-progress-bar status="accent"></bp-progress-bar>
  <bp-progress-bar status="success"></bp-progress-bar>
  <bp-progress-bar status="warning"></bp-progress-bar>
  <bp-progress-bar status="danger"></bp-progress-bar>
</div>

Install

NPM

// npm package
import '@blueprintui/components/include/progress-bar.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/progress-bar.js/+esm';
</script>

Accessibility

  • Provide a label that accurately describes the purpose of the progress bar
  • Use a visually distinguishable color to show the progress of the task
  • Ensure the contrast ratio between the bar color and its background is high enough to meet accessibility standards
  • Provide alternative text to describe the progress bar for users who use screen readers

bp-progress-bar

Properties

NameTypesDescription
i18nset default aria/i18n strings
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
valuenumber | null | undefineddetermines initial value of the control
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state

Attributes

NameTypesDescription
i18nset default aria/i18n strings
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
valuenumber | null | undefineddetermines initial value of the control
status'accent' | 'success' | 'warning' | 'danger'determine the visual status state

CSS Properties

NameTypesDescription
--color