• Home
• Qt 5.11
• Qt Quick Controls
• QML Types
• ProgressBarStyle QML Type

ProgressBarStyle

Provides custom styling for ProgressBar. More...

• List of all members, including inherited members

Properties

• background : Component
• control : ProgressBar
• currentProgress : real
• panel : Component
• progress : Component

Detailed Description

Example:

ProgressBar {
    value: slider.value
    style: ProgressBarStyle {
        background: Rectangle {
            radius: 2
            color: "lightgray"
            border.color: "gray"
            border.width: 1
            implicitWidth: 200
            implicitHeight: 24
        }
        progress: Rectangle {
            color: "lightsteelblue"
            border.color: "steelblue"
        }
    }
}

Note that the example above is somewhat simplified and will not animate an indeterminate progress bar. The following snippet demonstrates how you can incorporate a custom animation for the indeterminate state as well.

progress: Rectangle {
    border.color: "steelblue"
    color: "lightsteelblue"

    // Indeterminate animation by animating alternating stripes:
    Item {
        anchors.fill: parent
        anchors.margins: 1
        visible: control.indeterminate
        clip: true
        Row {
            Repeater {
                Rectangle {
                    color: index % 2 ? "steelblue" : "lightsteelblue"
                    width: 20 ; height: control.height
                }
                model: control.width / 20 + 2
            }
            XAnimator on x {
                from: 0 ; to: -40
                loops: Animation.Infinite
                running: control.indeterminate
            }
        }
    }
}

Property Documentation