Bootstrap Progress Extension

Custom Circular Progress Bars

Primary

25%

5px stroke

50%

15px stroke

75%

200px size

Success

60%

5px stroke

75%

15px stroke

Danger

35%

5px stroke

90%

15px stroke

Info

45%

5px stroke

100%

15px stroke (no animation)

عربي

٦٥٪

سمك الخط ١٥ بكسل

Basic Progress Bars

Default

5px height

15px height (2.5s duration)

Success

5px height

15px height (with delay)

Info

5px height

15px height (Individual Attrs)

Warning

5px height

15px height

Danger

5px height

15px height (no animation)

عربي

شريط تقدم أساسي

Configuration Options

All progress components can be configured using data attributes. There are two ways:

Individual Attributes (Recommended): Set options directly using `data-bs-*` attributes (e.g., `data-bs-stroke-width="10"`, `data-bs-animation`). This aligns with standard Bootstrap practice.
JSON Attribute (Legacy): Use the `data-bs-config` attribute with a JSON string (e.g., `data-bs-config='{"strokeWidth": 10, "animation": true}'`).

Precedence: JavaScript options passed to the constructor override individual attributes, which override `data-bs-config`, which override the defaults.

Available Attributes & Defaults:

data-bs-stroke-width (Circular only): Sets the stroke width in pixels (default: 15).
data-bs-size (Circular only): Sets the size in pixels (default: 120).
data-bs-duration: Animation duration in milliseconds (default: 1500).
data-bs-delay: Delay before animation starts in milliseconds (default: 0).
data-bs-animation: Enables animation (default: true). Set to `false` or omit the attribute to disable.
data-bs-animate-in-viewport: Only animate when the element enters the viewport (default: true). Set to `false` to disable.

Note: For boolean attributes like data-bs-animation, simply adding the attribute implies true. You only need to add `="false"` to explicitly disable it.

Accessibility Features

Bootstrap Progress Bar Extension were built with accessibility in mind:

ARIA attributes: All progress bars use proper role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax, and aria-label attributes
Reduced Motion: Respects the user's prefers-reduced-motion browser setting. When enabled, animations will be disabled automatically for users who prefer reduced motion
Text Labels: Circular progress includes visible text labels to provide clear information about the current progress value
Color Contrast: All progress bars maintain proper contrast ratios between background, foreground, and text elements
RTL Support: Full support for right-to-left languages and layouts using the dir="rtl" attribute
Responsive Design: Components adapt to different screen sizes, ensuring usability on mobile devices

Code Examples

Basic (Animated)

HTML Snippet

<div class="progress" role="progressbar" aria-label="Basic example"
   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
   data-bs-animation>
  <div class="progress-bar"></div>
</div>

Circular (Default, Animated)

45%

HTML Snippet

<div class="progress circular" role="progressbar" aria-label="Circular progress"
   aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
   data-bs-stroke-width="8"
   data-bs-animation>
  <div class="progress-bar">
    <div class="progress-label">45%</div>
  </div>
</div>

Circular (RTL, Sized, Animated)

٧٠٪

HTML Snippet

<!-- Combined RTL and Size Configuration -->
<div dir="rtl">
  <div class="progress circular" role="progressbar" aria-label="Large RTL Example"
       aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
       data-bs-size="150"
       data-bs-stroke-width="10"
       data-bs-animation>
    <div class="progress-bar bg-info">
      <div class="progress-label">٧٠٪</div>
    </div>
  </div>
</div>

Circular (No Animation)

85%

HTML Snippet

<div class="progress circular" role="progressbar" aria-label="No Animation Example"
   aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"
   data-bs-stroke-width="12"
   data-bs-animation="false"> <!-- Explicitly false -->
  <div class="progress-bar bg-warning">
    <div class="progress-label">85%</div>
  </div>
</div>

Circular (JSON Config)

30%

HTML Snippet (Using data-bs-config)

<!-- Example using the data-bs-config JSON attribute -->
<div class="progress circular" role="progressbar" aria-label="JSON Config Example"
   aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"
   data-bs-config='{
     "strokeWidth": 18,
     "size": 140,
     "duration": 2200,
     "delay": 300,
     "animation": true
   }'>
  <div class="progress-bar bg-secondary">
    <div class="progress-label">30%</div>
  </div>
</div>