# Progress
Progress are use to show the state of a particular event when creating a website.
Home
/ Progress
import { ProgressBar } from "funuicss";import { FunLoader } from "funuicss";Progress Bar
Good for displaying the state of an activity
| Prop | Description | Value(s) |
|---|---|---|
| `funcss` | Additional CSS class names to apply to the root container for custom styling | `string (CSS class names)` |
| `progress` | The progress value to display, clamped between 0 and 100 | `number (0 to 100)` |
| `height` | Height of the linear progress bar (ignored for circle type) | `number (pixels)` |
| `children` | Optional React nodes rendered inside the progress bar content area | `React.ReactNode` |
| `content` | Custom content inside the progress indicator. Can be a function receiving progress or a React node/string | `function(progress: number) => React.ReactNode | React.ReactNode | string` |
| `bg` | Background color or CSS class name controlling the progress bar's fill or stroke color. For circles, it should match CSS class names with stroke color definitions | `string (CSS class name like 'primary', 'success', or CSS color code)` |
| `raised` | If true, applies a raised (elevated/shadowed) style to the linear progress bar | `boolean` |
| `rounded` | If true, rounds the corners of the progress bar or circle | `boolean` |
| `type` | Type of progress bar to render: either 'linear' horizontal bar or 'circle' | `'linear' | 'circle'` |
| `size` | Diameter of the circular progress bar (only applies if type='circle') | `number (pixels)` |
| `strokeWidth` | Width of the stroke for the circular progress indicator (only for type='circle') | `number (pixels)` |
#
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
65%
65%
Loader
keep the user engaging while waiting for something
| Prop | Description | Value(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