ProgressBarStyle QML Type | Qt Quick Controls 5.5

- Qt 5.5
- Qt Quick Controls
- QML Types
- ProgressBarStyle QML Type
- Qt 5.5.1 Reference Documentation

# 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-onlycontrol : ProgressBar

The ProgressBar this style is attached to.

read-onlycurrentProgress : 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.