Framework7 Progress Bar - Framework7

How Progress Bar works in Framework7?

Description

Progress bars can be used to display loading of assets or progress of a task to the users. Users can specify the progress bar by using progressbar class. When user doesn't know how long the loading process takes for a request, then they can use progressbar-infinite class.

Progress Bar JavaScript API

Progress bar can be used along with the JavaScript API to specify show, hide and progress properties by using the below mentioned methods:

S.N.

Methods

Description & Parameters

1

myApp.setProgressbar(container, progress, speed)

This will set progress bar for the progress of a task.

· container: This is a string or HTML element which defines the container of progress bar element.

· progress: This will represent in integer format that defines the progress of a task.

· speed: This will represent in integer format that specifies the duration of the progress of a task.

2

myApp.hideProgressbar(container)

This will hide the progress bar.

· container: It is string or HTML element that defines the container of progress bar element.

3

myApp.showProgressbar(container, progress, color)

This will display the progress bar.

· container: This is a string or HTML element that defines the container of progress bar element.

· progress: This will represent in integer format that defines the progress of a task.

· speed: This will represent in integer format that specifies the duration of the progress of a task.

Example

Below example displays animated determinate and indeterminate progress bars to indicate activity in the Framework7:

Output

Below are the steps to see how above code works:

  • Save above HTML code as progress_bar.html file in the server root folder.
  • Open this HTML file as http://localhost/progress_bar.html and below output gets displayed.
  • Example displays the progress bar which indicates how long an operation will take to complete the process and displays different types of progress bars to indicate activity.

Progress Bar

Determinate Progress Bar

Inline determinate progress bar

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Framework7 Topics