Progress Bar Pack
Introduction
Five variants of customizable progress for native mobile. Regular, Stepper loader, Step tracker, Checkmark stepper, and Circular progress.
Progress Bar Types
- Regular: A standard linear progress bar that shows completion as a percentage, ideal for simple loading or task progress.
- Stepper loader: An animated stepper that indicates ongoing loading through sequential steps, suitable for multi-stage processes.
- Step tracker: Tracks progress through a series of steps, highlighting the current step and completed ones for workflows like forms or wizards.
- Checkmark stepper: A stepper with checkmarks for completed steps, providing visual confirmation of progress in sequential tasks.
- Circular: A circular progress indicator that fills around a circle based on percentage, perfect for compact displays or radial progress.
Features
Multiple Progress Types - Choose from 5 different progress bar styles for any use case.
Custom Color System - Full accent color customization with text color control.
Flexible Data Input - Use percentage values or step-based progress tracking.
Smart Tooltips - Optional percentage tooltips that follow progress position.
Real-time Updates - Instant progress updates without animation delays.
Mobile Optimized - Built specifically for React Native mobile performance.
Step Configuration - Set current step, total steps, and track completion status.
How to use
- Drop on the view
- Tune other customization values accordingly
Element Fields
- Progress: The progress value (percentage or step)
- Show tooltip: Whether to show tooltips
- Accent color: The accent color for progress
- Inactive color: The color for inactive parts
- Text color: The color for text elements
Exposed States
- percentage: The current progress percentage
- is completed: Whether the progress is completed