/
Progress Bar Block
Progress Bar Block
A horizontal progress or skill bar with configurable fill percentage, colors, and scroll-triggered animation. Show completion, skill levels, or any metric as a clean visual bar.
VISUAL PREVIEW
Design Systems
72%
Motion Design
45%
Frontend Dev
90%
When to use this block
- Skill or competency bars on portfolios and resumes
- Project completion or goal tracking
- Stats, fundraising progress, or KPI dashboards
Percentage & Fill
Set the fill percentage (0–100) and customize the fill and track colors. Both support solid colors or gradients.
Fill
Sidebar Panel
Percentage
%
Fill Color
#171717
Track Color
#e5e5e5
Size
Control the bar height and border radius to create anything from a thin line to a chunky meter.
Size
Sidebar Panel
Height
px
Border Radius
px
HEIGHT COMPARISON
Thin — 4 px
Standard — 8 px
Thick — 16 px
Animation
When enabled, the fill bar starts at 0% width and animates to the target percentage once the block scrolls into view. Uses IntersectionObserver so animation only fires when visible.
Animation
Sidebar Panel
Animate Fill
Default: on. When off, the fill renders at its target width immediately with no transition.
Overlay Text
Optionally display text on top of the progress bar (e.g. the percentage or a label). Toggle it on, set the text content, color, and responsive typography.
Overlay Text
Sidebar Panel
Show Text
Text
Text Color
#FFFFFF
Font Size
Font Weight
OVERLAY EXAMPLE
With overlay text
Without overlay text
Overlay text works best with a taller bar height (16 px+). Font size is responsive (3 breakpoints).
Spacing
Padding and margin. Both use per-breakpoint objects.
Responsive: Mobile Tablet Desktop
All Available Controls
Percentage Fill amount 0–100
percentage: integer 0–100 (default 0). Determines how much of the track is filled. Rendered as a percentage-width on the inner fill element.
Colors Fill color + track background
fillColor: color or gradient for the filled portion (default #171717). trackColor: background color or gradient for the unfilled track (default #e5e5e5). Both accept any valid CSS color or gradient value.
Height & Border Radius Bar thickness + corner rounding
height: bar height in pixels (default 8). borderRadius: corner rounding in pixels (default 4). Applied to both the track and the fill element.
Animation Scroll-triggered fill animation
animate: boolean (default true). When enabled, uses IntersectionObserver to detect when the bar enters the viewport. Fill starts at 0% width and transitions to the target percentage. When disabled, renders at full width immediately.
Overlay Text Label on top of the bar
showText: boolean toggle. overlayText: the text string displayed on the bar. overlayTextColor: text color (default white). Typography controls: overlayFontSize/overlayLineHeight/overlayFontWeight with responsive variants (+Md/Lg).
Spacing Padding & margin, responsive objects
paddingMobile/Tablet/Desktop and marginMobile/Tablet/Desktop: per-breakpoint objects with top/right/bottom/left.