Bixby Developer Center

Adds a progress bar component to let users know the progress of an event or action. You can specify a decimal or integer value between 0 to 100.

Interactive Demo

Examples

  section {
    content {
      progress-bar (70.2)
    }
    ...
  }

compound-card {
    content {
        progress-bar (30)
    }
}

section {
    content {
        progress-bar ("#{value(flight.status)}") // Use EL to pass a value to progress-bar
    }
}

Here are several progress bars within a single view file:

result-view {
  match {
    viv.core.Text {
      from-output {
        ShowProgressBar
      }
    }
  }

  message ("Here are some progress bars:")

  render {
    layout {
      section {
        content {
          single-line {
            text {
              value ("0%")
              style (Detail_M)
            }
          }
          progress-bar (0)

          single-line {
            text {
              value ("25%")
              style (Detail_M)
            }
          }
          progress-bar (25)

          single-line {
            text {
              value ("50%")
              style (Detail_M)
            }
          }
          progress-bar (50)

          single-line {
            text {
              value ("75%")
              style (Detail_M)
            }
          }
          progress-bar (75)

          single-line {
            text {
              value ("100%")
              style (Detail_M)
            }
          }
          progress-bar (100)
        }
      }
    }
  }
}

View master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.