Bixby Developer Center

References

progress-bar

optionalmultiple allowedvalue optional

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.