Progress Bars - Done
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:
<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.
- 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.
<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)
<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)
<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><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.
<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.