Skip to main content
ProgressView(props?: { value: number, total?: number }): Component;

​
Parameters

​
props
{ value: number, total?: number }
Progress configuration.

​
Support

​
Usage

​
Indeterminate progress

ProgressView()

​
Progress with percentage

ProgressView({ value: 0.6 })

​
Progress with custom total

ProgressView({ value: 75, total: 100 })

​
Progress with label

VStack({ spacing: 8 }, [
    HStack([
        Text("Download Progress"),
        Spacer(),
        Text("60%")
    ]),
    ProgressView({ value: 0.6 })
])

​
Styled progress bar

ProgressView({ value: 0.4 })
    .progressViewStyle("linear")
    .accentColor(Color("green"))
    .scaleEffect({ y: 2 })

​
Loading screen with progress

VStack({ spacing: 20 }, [
    Text("Loading...")
        .font("title2")
        .bold(),
    ProgressView({ value: loadingProgress })
        .frame({ width: 200 }),
    Text(`${Math.round(loadingProgress * 100)}% complete`)
        .font("caption")
        .foregroundStyle(Color("gray"))
])