# Progress
Progress are use to show the state of a particular event when creating a website.
Progress Bar
Good for displaying the state of an activity
PropDescriptionValue(s)
`lined`To create a line progress`Boolean`
`progress`To set the state of the progress`1 - 100`
`raised`To add raise shadow to the progress`Boolean`
`rounded`add round radius`Boolean`
`bg`Set the background color of your progress`funUi Color`
`height`To set a height for your progress`css property`
#
Simple progress bars
These progress bars are good for showind the state of an action, for example, a user downloading an asset
React / Next.js Show Source Code
primary 50%

Raised primary 50%

Success! 99%

85%

90%
Loader
keep the user engaging while waiting for something
PropDescriptionValue(s)
`variant`To select the type`simple | duotone | circle`
`size`To set the size of your loader`Number`
`fixed`Create a loader which is fixed to the center of the screen`Boolean`
`backdrop`To add a backdrop to your fixed loader`Boolean`
`color`To change the color of the loader`FunUi Colors`
#
Simple Loader
The loader is good to keeps the user engaging while waiting for something. for example a user logining in.
React / Next.js Show Source Code