Qt 5.11 | Qt Quick Controls | QML Types | ProgressBarStyle QML Type

Qt 5.11.3 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-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.