Progress bar

PRO

PRO 

Component

Progress Bar Pro extends beyond a simple scroll indicator, offering a flexible system of visual styles that can adapt to different layout needs and design contexts. It includes classic progress bars, solid minimal styles, textured or image-based variants, aqua glossy designs, and motion-based bars with subtle animation.

The component can also be used in more structured UI scenarios, such as navigation menus or footer-integrated layouts where the bar becomes part of the page structure itself. Additional templates explore alternative uses like progress-driven footer content, animated motion bars, and full demo page implementations that showcase real-world behavior and integration patterns.

Options:

✓ Preview
Adjust length - useful to test how readable text is inside the bar.
Make the bar invisible - useful when it overlaps other page elements.

✓ Dropzone
Enable: turns the dropzone area on/off
Pointer events: controls interaction with content
Range: Disable selection / Selectable
Overflow: controls content overflow behavior
Range: Hidden / Visible
Skew: tilts the dropzone container
Range: Left / Disable / Right

✓ Layout
Position: defines bar positioning type
Range: Fixed / Absolute / Relative
Top: distance from top
Range: auto, 0 → 10
Bottom: distance from bottom
Range: auto, 0 → 10
Left: distance from left
Range: 0 → 10, 25% / 33% / 50% / 66%
Right: distance from right
Range: 0 → 10, 25% / 33% / 50% / 66%
Max-Width Range: 320 → 1300px
Alignment: left, center, right
Z-Index: layer stacking order

✓ Sizing
Height: bar height control
Range: 0.5 → 72, 2.5vh → 100vh (for special efffects)

✓ Progress Bar - Gradient
Direction: gradient flow direction
Range: Up / Down / Left / Right / Diagonal variants
From Color and Range: starting color
Range: 0% → 100%
Via Color (optional): middle color
To Color and Range: ending color
Range: 0% → 100%

Animation (Range & Speed system):
BG Repeat: pattern scale for animation
Range: 10% → 300%
Speed: animation duration
Range: 0s → 10s
Range: Backward / Pulse / Forward
Ease: animation curve
Range: Linear / Ease / In / Out / In Out

✓ Progress Bar - Background Image
Source: Drag image or external URL
Position: image alignment
Range: Top / Center / Bottom / Left / Right + combinations
Size: image scaling mode
Range: Auto / Cover / Contain
Repeat: tiling mode
Range: Repeat / No Repeat / X / Y / Round / Space
Opacity: image transparency
Range: 0% → 100%

✓ Progress Bar options
Gradient: enables gradient mode
Direction: gradient flow direction
Range: Up / Down / Left / Right / Diagonal variants
From Color: starting color
From Range: start position
Range: 0% → 100%
Via Color (optional): middle color
To Color: ending color
To Range: end position
Range: 0% → 100%

✓ Bar Background
Background: enable/disable background
Color: background color
Opacity: transparency level
Range: 0% → 100%
Border Color: border styling color
Border Width: border thickness
Radius: corner rounding
Shadow: shadow effect
Blur: background blur strength
Range: none / 5px / 10px / 15px
Skew: background tilt
Range: Left / Disable / Right

✓ Advanced
CSS Classes: custom CSS class input
✓ Component Info
Informational section (usage tips and guidelines only)