- Components
- utilities
- progressbar
PresetUI - Progress Bar and Meter
Customizable and semantic progressbar and meter elements for easy styling and usage.
Progress Bar
The PresetUI Progress Bar component uses the native
<progress> element, styled for easy customization. Usage
-
Base Class:
ui-progress-bar- The base class for the progress bar component.
-
Sizes:
- Customize the size with classes:
ui-progress-bar-sm,ui-progress-bar-md,ui-progress-bar-lg.
- Customize the size with classes:
-
Rounded Corners:
- Apply rounded corners with the class:
ui-progress-bar-rounded-md.
- Apply rounded corners with the class:
-
Background Color:
- Set the background color using:
bg-colorName.
- Set the background color using:
-
Indicator Color:
- Define the indicator color by adding a text color class, such as
text-secondary.
- Define the indicator color by adding a text color class, such as
Meter
The Meter component uses the
<meter> element, providing a way to display fractional values or measurements. Usage
-
Base Class:
ui-meter- The base class for the meter component.
-
Sizes:
- Customize the size with classes:
ui-meter-h-md.
- Customize the size with classes:
-
Rounded Corners:
- Apply rounded corners with the class:
ui-meter-rounded-md.
- Apply rounded corners with the class:
-
Background Color:
- Set the background color using:
bg-bg-muted.
- Set the background color using:
-
Indicator Color:
- Define the indicator color by adding a text color class, such as
text-emerald6.
- Define the indicator color by adding a text color class, such as
Differences Between <progress> and <meter>
-
<progress>:- Represents the completion progress of a task.
- Typically used for loading bars or task completion indicators.
-
<meter>:- Represents a fractional value or measurement within a known range.
- Suitable for displaying gauges or measurements, such as disk usage or temperature.