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