Skip to content

Progress Bars

Jump to bottom
Nick Sarno edited this page Apr 14, 2022 · 1 revision

CustomProgressBar

Highly customizable progress bar.

CustomProgressBar(selection: BinaryFloatingPoint, range: BinaryFloatingPoint)
@State private var selection: Double = 55
@State private var range: ClosedRange<Double> = 0...100

var body: some View {
     CustomProgressBar(selection: selection, range: range)
}

Customize with optional parameters.

CustomProgressBar(
     selection: 50,
     range: 0...100,
     backgroundColor: .green,
     foregroundColor: .black,
     cornerRadius: 10,
     height: 20)

Use AnyShapeStyle initializer for to fill the View with AnyShapeStyle instead of plain Colors (often used for gradients).

CustomProgressBar(
     selection: selection,
     range: range,
     background: AnyShapeStyle(Color.yellow),
     foreground: AnyShapeStyle(LinearGradient(colors: [.red, .orange], startPoint: .leading, endPoint: .bottomTrailing)))
Clone this wiki locally