Display how much work of an operation is already completed using the <ProgressBar> component.

let (progress, set_progress) = create_signal(Some(34.0)); view! { <ProgressBar progress=progress/> } 34.00 %

Indeterminate state#

As you have probably spotted in the above example, progress is stored as Option<T>. In our earlier example, we always had Some(progress) which the progress bar displayed for us. Whenever the signal stores a None value, the progress bar is in the indeterminate state, telling the user that something is going on, but we cannot exactly say how much of the total work already completed.

<ProgressBar progress=create_signal(None).0 />


You may overwrite any of the following CSS variables to meet your styling needs.

--progress-bar-height --progress-bar-border-radius --progress-bar-background-color --progress-bar-background-color-transparent --progress-bar-background-box-shadow --progress-bar-fill-background-color --progress-bar-fill-transition --progress-bar-color