Gravity
Search…
Gravity
Welcome to Gravity
Getting Started
Stack
Updates
Changelog
Gravity Server
Introduction
Installation
Application Structure
REST API
Authentication
Config
Environment Variables
Database Queries
Handling Errors
Logging
Push Notifications
Email Notifications
User Feedback
Permissions (Roles)
File Uploads
Payments
Free Accounts
CLI Toolbelt
Testing
Gravity Web
Introduction
Tailwind & SCSS
Routing
Events
Authentication
Hooks
Views
Handling Errors
Deployment
Components
Animate
Article
Badge
Button
Card
Chart
Feature List
Feedback
Form
Grid
Header
Hero
Icon
Image
Layout
Link
List
Loader
Logo
Message
Modal
Nav
Notification
Onboarding
Pricing
Progress
Search
Social
Stat
Table
Tabs
Testimonial
Gravity Native
Introduction
Prerequisites
Installation
App Context
Authentication
Magic Links
Handling Errors
Navigation
Config
Events
Views
Components
Push Notifications
Payments
Building Your App
Mission Control
Introduction
Installation
User Management
Feedback
Events
Logs
Powered By
GitBook
Progress
Progress Bar
Create a progress bar to provide visual feedback to a user on how long an action is taking. Progress bars are automatically animated.
1
<
ProgressBar label
=
'Progress'
progress
=
'75%'
/>
Copied!
Props
prop
description
value
label
label text
string
progress
percentage value
0% - 100%
Progress Steps
Steps can be used to indicate the current point in a multiple-stage process, such as filling in a long form.
1
<
ProgressSteps items
=
{[
2
{
name
:
'Basket'
,
url
:
'/basket'
,
completed
:
true
},
3
{
name
:
'Checkout'
,
url
:
'/checkout'
,
completed
:
true
},
4
{
name
:
'Payment'
,
url
:
'/payment'
,
completed
:
false
},
5
]}
/>
Copied!
Props
prop
description
value
items
list of step objects containing
name
,
url
and
completed
object array
​
Previous
Pricing
Next
Search
Last modified
2yr ago
Copy link
Contents
Progress Bar
Progress Steps