ProgressBarStyle QML Type

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