---
title: Progress Bars - Done
slug: progress-bars-done
createdAt: 2025-01-13T18:49:14.446Z
---

# Overview

The Progress Bar element is a versatile and visually appealing progress bar component that can be seamlessly integrated into web applications. It supports:

- **Solid Colors**: Utilize a consistent, predefined color for progress representation.
- **Variable Colors**: Dynamically change the progress bar color based on progress percentage.
- **Reversed Variable Colors**: Apply a reversed color scheme for specific use cases.
- **Optional Under Section**: Display scale markers to indicate the start and end points of the progress bar.
- **Tooltips**: Enhance user experience with informative tooltips.

# HTML Structure

The progress bar component is constructed using nested  DIVs with specific class names and attributes. Below is the complete structure:

```html
<div class="progress-bar-container">
  <div class="progress-bar-base" data-tippy-content="35%">
    <div class="progress-bar-progress" style="width: 35%;" data-progress-variable-color="true">
    </div>
  </div>
  <div class="progress-bar-under">
    <div>0</div>
    <div>2008 Pages</div>
  </div>
</div>
```

# Attributes

`data-progress-variable-color`

- **Purpose**: Determines the coloring behavior of the progress bar based on progress percentage.
- **Usage**: Set this attribute on the `.progress-bar-progress` div to modify the color of the progress bar.&#x20;
- **Values**:
  - `true`: Applies a standard gradient from red to green as progress increases.
  - `reverse`: Applies a reversed gradient from green to red as progress increases.
  - Not Set or Other Values: Retains the predefined system-wide color without dynamic adjustments.

`data-tippy-content`

- **Purpose**: Adds a tooltip to the progress bar.
- **Usage**: Set this attribute on the `.progress-bar-base` div to display additional information when the user hovers over the progress bar.

# Usage

Implementing the progress bar involves setting up the HTML structure with appropriate classes, attributes, and styles. Below are the different configurations you can utilize.

## Solid Color

Use a solid, predefined color for the progress bar by omitting the `data-progress-variable-color` attribute.

## Variable Color

Apply dynamic coloring based on progress percentages by setting `data-progress-variable-color="true"`.

## Reversed Variable Color

Apply a reversed color scheme by setting `data-progress-variable-color="reverse"`.

## Optional Under Section

Include the .progress-bar-under div to display scale markers below the progress bar, such as the minimum and maximum values or descriptive labels.

## Adding Tooltips

Enhance user experience by adding tooltips using the data-tippy-content attribute on the `.progress-bar-base` div.

## Using Progress Bars in Tables

When integrating progress bars within table cells, it’s recommended not to include the `.progress-bar-under` section. This ensures that the progress bar remains compact and fits seamlessly within the table layout.

**Structure**

Wrap the progress bar within appropriate table cell elements, ensuring proper alignment and spacing.

```html
<td class="table-cell">
  <div class="table-cell-content">
    <div class="progress-bar-container">
      <div class="progress-bar-base" data-tippy-content="{tooltip}">
        <div class="progress-bar-progress" style="width: {progressPercent}%"></div>
      </div>
    </div>
  </div>
</td>
```

***

# Use Cases

## Usage Tracking

**Scenario**: Monitoring resource usage such as disk space, memory, or bandwidth.

When monitoring resource usage (e.g., disk space, memory, bandwidth), you can omit the `data-progress-variable-color` attribute to use a solid, pre-defined color for the progress bar. This ensures a consistent look while still accurately reflecting usage percentages.

### Implementation

- **Configuration**: Omit the data-progress-variable-color attribute to use a solid, predefined color.
- **Additional Information**: Use the .progress-bar-under div to display relevant labels for the min/max values. (for example "0" and "100" for percent)

```html
<div class="progress-bar-container">
  <div class="progress-bar-base" data-tippy-content="60%">
    <div class="progress-bar-progress" style="width: 60%;">
    </div>
  </div>
  <div class="progress-bar-under">
    <div>0</div>
    <div>249,468 GB</div>
  </div>
</div>
```

### Benefits

- **Consistency**: Maintains a uniform appearance with a solid color.
- **Removes Emotion**: Variable color can invoke emotion, solid color progress bars are more emotionally neutral. (no good or bad, just fact)
- **Clarity**: Clearly represents resource utilization without dynamic color changes.

## Project Progress

**Scenario**: Tracking the completion status of projects or tasks.

For projects or tasks with varying levels of completion, use `data-progress-variable-color="true"` to apply a dynamic gradient based on progress percentages. This provides a visual cue for progress, with colors transitioning from red (low progress) to green (high progress).

### Implementation

- **Configuration**: Use data-progress-variable-color="true" to apply a dynamic gradient.
- **Additional Information**: Use the .progress-bar-under div to display relevant labels for the min/max values. (for example "0" and "100" for percent)

```html
<div class="progress-bar-container">
  <div class="progress-bar-base" data-tippy-content="75%">
    <div class="progress-bar-progress" style="width: 75%;" data-progress-variable-color="true">
    </div>
  </div>
  <div class="progress-bar-under">
    <div>0%</div>
    <div>100%</div>
  </div>
</div>
```

```html
<div class="progress-bar-container">
  <div class="progress-bar-base" data-tippy-content="75%">
    <div class="progress-bar-progress" style="width: 75%;" data-progress-variable-color="true">
    </div>
  </div>
  <div class="progress-bar-under">
    <div>0%</div>
    <div>100%</div>
  </div>
</div>
```

### Benefits

- **Visual Cue**: Dynamic coloring intuitively indicates progress levels.
- **Engagement**: Enhances visual appeal and user engagement with gradient transitions.



## Alert and Priority Metrics

**Scenario**: Displaying priority levels or alert statuses where lower percentages are favorable and higher percentages are critical.

In scenarios where reversed priority is essential (e.g., an alert system where lower percentages are good, and higher percentages are bad), use `data-progress-variable-color="reverse"`. This reverses the gradient, starting with green for `0-9%` and transitioning to red for `100%`.

### Implementation

- **Configuration**: Use data-progress-variable-color="reverse" to apply a reversed gradient.
- **Additional Information**: Use the .progress-bar-under div to provide context.

```html
<div class="progress-bar-container">
  <div class="progress-bar-base" data-tippy-content="20%">
    <div class="progress-bar-progress" style="width: 20%;" data-progress-variable-color="reverse">
    </div>
  </div>
  <div class="progress-bar-under">
    <div>Low</div>
    <div>High</div>
  </div>
</div>
```

### Benefits

- **Clear Distinction**: Differentiates between safe and critical states using color cues.
- **Quick Assessment**: Facilitates rapid understanding of priority levels based on color gradients.

# Notes

**Script Functionality**: The progressbar-variable-color.js script handles dynamic coloring and hides the .progress-bar-progress div when the width is 0%. Ensure this script is correctly included and loaded in the project.

**Default Colors**: Progress bars without the data-progress-variable-color attribute will display using the system-wide predefined color, maintaining consistency across your application.

**Browser Compatibility**: The framework is designed to be compatible with modern browsers. If your project needs to support older browsers, verify compatibility and implement necessary polyfills or fallbacks.

# Script

::File{src="https://api.archbee.com/api/presign/ekdzobNU8PAqpbk3VU6LC-NKPfJWZ9BxnFSxLeLASY8-20250125-011324.js" label="progressbar-variable-color.js"}