Progress Dot

Example

Shows minimal dot-based progress indication.

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

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

Size

Demonstrates different progress dot sizes.

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