ProgressBarStyle QML Type

Provides custom styling for ProgressBar. More...

Import Statement:	import QtQuick.Controls.Styles 1.4
Since:	Qt 5.1

• 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

background : Component

The background component for this style.

Note: The implicitWidth and implicitHeight of the background component must be set.

[read-only] control : ProgressBar

The ProgressBar this style is attached to.

[read-only] currentProgress : real

A value in the range [0-1] indicating the current progress.

panel : Component

The panel component for this style.

progress : Component

The progress component for this style.