Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Progress Dot

The Progress dot component is designed to indicate that a process is ongoing. It gives users feedback that the system is processing the task and that they need to wait.

Example

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

<bp-progress-dot aria-label="loading..."></bp-progress-dot>

Size

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

<div bp-layout="inline gap:md">
<bp-progress-dot size="sm" aria-label="loading..."></bp-progress-dot>
<bp-progress-dot aria-label="loading..."></bp-progress-dot>
<bp-progress-dot size="lg" aria-label="loading..."></bp-progress-dot>
</div>

Install

NPM

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

CDN

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

Accessibility

  • Screen Readers: Use aria-label attribute to provide a meaningful description for screen readers. It's important to set a descriptive label, such as "loading", to indicate the current process.