Bixby Developer Center

Guides
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.

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 on GitHub

Here is how a progress-bar appears on different devices:

MobileWatchTVFridge
progress-barprogress-barprogress-barprogress-bar