Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow 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
i18n
minnumber
maxnumber
valuenumber | null | undefined
status'accent' | 'success' | 'warning' | 'danger'

Attributes

NameTypesDescription
i18n
minnumber
maxnumber
valuenumber | null | undefined
status'accent' | 'success' | 'warning' | 'danger'

CSS Properties

NameTypesDescription
--color