Progress Bar¶
Progress bars notify users that an app needs more time to process a user action, and if possible tell how much time (approximately) it will take.
Usage¶
Progress bars inform users about the status of ongoing processes, such as loading an app, documents or data, submitting a form, saving data and more.
When to use¶
Use a progress bar for any action that takes longer than about one second. Anything shorter than that will act distracting to users.
Dos and don'ts¶
- An application should provide visual feedback for any extended waiting/loading period.
- Progress bars shall be used for non-blocking waiting/loading actions.
Design¶
A Progress Bar consists of the following elements:
- Label (optional), 2. Progress, 3. Track, 4. Value (optional)
Besides the default size, there is also a small variant available.
- Default, 2. Small
Code¶
Usage¶
import { SiProgressbarComponent } from '@siemens/element-ng/progressbar';
@Component({
imports: [SiProgressbarComponent, ...]
})
Except where otherwise noted, content on this site is licensed under MIT License.