Progress Bar Block
Display animated progress indicators for skills, project completion, or any percentage-based data.
What is the Progress Bar Block?
An animated horizontal bar that fills to a specified percentage with optional labels and styling.
Key Features
- Animated fill on scroll into view
- Percentage display (0-100)
- Label text support
- Multiple styles (solid, striped, gradient)
- Customizable colors
- Height and border radius control
- Animation duration and delay
How to Use
- Insert Progress Bar block
- Set percentage value (0-100)
- Add label text (optional)
- Choose style (solid/striped)
- Customize colors and height
- Configure animation settings
Settings
Values:
- Percentage – Progress value (0-100)
- Label – Text description
- Show Percentage – Display percentage number
Styling:
- Style – Solid, Striped, or Gradient
- Bar Color – Fill color
- Background Color – Track color
- Height – Bar thickness (8-40px)
- Border Radius – Rounded corners
Animation:
- Duration – Animation speed (1-3 seconds)
- Delay – Wait before animating
- Trigger – On scroll into view
Common Use Cases
Skills Display
- HTML/CSS: 90 percent
- JavaScript: 85 percent
- React: 75 percent
Project Completion
- Design Phase: 100 percent
- Development: 60 percent
- Testing: 20 percent
Survey Results
- Very Satisfied: 85 percent
- Satisfied: 12 percent
- Unsatisfied: 3 percent
Best Practices
- Keep percentages realistic
- Use clear, concise labels
- Group related progress bars
- Use consistent colors
- Set appropriate height (16-24px typical)
- Animate on scroll for impact