Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

use leptos::prelude::*;
use singlestage::*;
use std::time::Duration;

#[component]
pub fn ProgressExample() -> impl IntoView {
    let value = RwSignal::new(13.);

    Effect::new(move || {
        set_timeout(move || value.set(66.), Duration::from_millis(500));
    });

    view! { <Progress class="w-[60%]" value /> }
}

Label

Use a Field component to add a label to the progress bar.

Upload progress66%

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ProgressLabelExample() -> impl IntoView {
    view! {
        <Field class="w-full max-w-sm">
            <Label label_for="progress-upload">
                <span>"Upload progress"</span>
                <span class="ml-auto">"66%"</span>
            </Label>
            <Progress value=66. id="progress-upload" />
        </Field>
    }
}

Controlled

A progress bar controlled by a slider.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ProgressControlledExample() -> impl IntoView {
    let value = RwSignal::new(0.);

    view! {
        <div class="flex w-full max-w-sm flex-col gap-4">
            <Progress value />
            <Slider value />
        </div>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::progress::*;

#[component]
pub fn ProgressAnatomy() -> impl IntoView {
    view! { <Progress /> }
}

API Reference

Progress

Displays progress.

Custom Attributes
Name	Type	Default	Description
max	usize	100	The value that represents 100%, or full.
value	usize	0	The current progress value to be rendered.

Implements global attributes.

Getting Started

Components

Progress

Label

Controlled

Anatomy

API Reference

Progress