Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

ProgressBarStyle

Provides custom styling for ProgressBar. More...

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

Properties

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.


Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded