Tabris.js Widgets: ProgressBar
The ProgressBar widget represents a numeric value as a horizontal bar with a growing indicator. It is not tied to the percentage values, so instead of regular 0-100 range, you can set any start and finish values for the progress bar by modifying the selection property. Use left, right and width properties from the Widget parent class to modify the progress bar width.
Using property state you can set ProgressBar to normal, paused and error states for better interactivity. Run the following code to see the difference between states:
|
1 2 3 4 5 6 7 8 9 |
import { ProgressBar, contentView } from 'tabris'; contentView.append( <$> ProgressBar stretchX state='normal' selection={35} maximum={100} top={32} padding={16} /> ProgressBar stretchX state='paused' selection={55} maximum={100} top='prev() 16' padding={16} /> ProgressBar stretchX state='error' selection={70} maximum={100} top='prev() 16' padding={16} /> </$> ); |
And here is an animated progress bar using a timer:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import {ProgressBar, contentView} from 'tabris'; contentView.set({padding: 16}).append( ProgressBar stretchX centerY maximum={300} /> ); const progressBar = $(ProgressBar).only(); setInterval(() => { const selection = progressBar.selection + 1; progressBar.selection = selection > 300 ? 0 : selection; }, 20); |
For more detailed information about the widget, use the ProgressBar documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
