Description
The progress bars can be used to show loading of assets or progress
of a task to the users. You can specify the progress bar by using the
progressbar class. When user doesn't know how long the loading process will be there for the request, you can use
progressbar-infinite class.
Progress Bar JavaScript API
The progress bar can be used along with the JavaScript API to specify
show,
hide and
progress properties by using the following methods:
| S.N. | Methods | Description & Parameters |
| 1 |
myApp.setProgressbar(container, progress, speed)
|
It sets progress bar for the progress of a task.
- container: It is string or HTML element that defines the container of progress bar element.
- progress: It represents in integer format that defines the progress of a task.
- speed: It represents in integer format that specifies the duration of the progress of a task.
|
| 2 |
myApp.hideProgressbar(container)
|
It hides the progress bar.
- container: It is string or HTML element that defines the container of progress bar element.
|
| 3 |
myApp.showProgressbar(container, progress, color)
|
It displays the progress bar.
- container: It is string or HTML element that defines the container of progress bar element.
- progress: It represents in integer format that defines the progress of a task.
- speed: It represents in integer format that specifies the duration of the progress of a task.
|
Example
The below example displays animated determinate and indeterminate progress bars to indicate activity in the Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Progress Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Progress Bar</div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">Determinate Progress Bar</div>
<div class="content-block">
<div class="content-block-inner">
<p>Inline determinate progress bar:</p>
<div class="progressbar-inline">
<p><span data-progress="10" class="progressbar"></span></p>
<p class="buttons-row">
<a href="#" data-progress="25" class="button button-raised">25%</a><a href="#" data-progress="50" class="button button-raised">50%</a><a href="#" data-progress="75" class="button button-raised">75%</a><a href="#" data-progress="100" class="button button-raised">100%</a>
</p>
</div>
<p>Loads and hides the determinate progress bar:</p>
<div class="progressbar-load-hide">
<p><a href="#" class="button button-raised">Start Loading</a></p>
</div>
<p>Displays the determinate progress bar on top:</p>
<p class="progressbar-overlay"><a href="#" class="button button-raised">Start Loading</a></p>
</div>
</div>
<div class="content-block-title">Infinite Progress Bar</div>
<div class="content-block">
<div class="content-block-inner">
<p>Inline infinite progress bar:</p>
<p><span class="progressbar-infinite"></span></p>
<p>Displays the infinite progress bar in multiple colors:</p>
<p><span class="progressbar-infinite color-multi"></span></p>
<p>Displays the infinite progress bar on top:</p>
<p class="progressbar-infinite-overlay"><a href="#" class="button button-raised">Start Loading</a></p>
<p>Displays the infinite progress bar in multiple colors on top:</p>
<p class="progressbar-infinite-multi-overlay"><a href="#" class="button button-raised">Start Loading</a></p>
</div>
</div>
<div class="content-block-title">Different types of colored progress bars:</div>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div data-progress="5" class="progressbar color-red"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="10" class="progressbar color-pink"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="20" class="progressbar color-deeppurple"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="30" class="progressbar color-blue"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="40" class="progressbar color-cyan"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="50" class="progressbar color-green"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="60" class="progressbar color-lime"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="70" class="progressbar color-amber"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="80" class="progressbar color-deeporange"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="90" class="progressbar color-gray"></div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div data-progress="100" class="progressbar color-black"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7({
material: true
});
var $$ = Dom7;
$$('.progressbar-inline .button').on('click', function () {
var progress = $$(this).attr('data-progress');
var progressbar = $$('.progressbar-inline .progressbar');
myApp.setProgressbar(progressbar, progress);
});
$$('.progressbar-load-hide .button').on('click', function () {
var container = $$('.progressbar-load-hide p:first-child');
//it doesn't load if another progresbar is loading
if (container.children('.progressbar').length) return;
myApp.showProgressbar(container, 0);
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 0, 'orange');
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
//hides the progressbar
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-infinite-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'yellow');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
$$('.progressbar-infinite-multi-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'multi');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
</script>
</body>
</html>
Output
Let's carry out the following steps to see how above code works:
- Save above HTML code as progress_bar.html file in your server root folder.
- Open this HTML file as http://localhost/progress_bar.html and output as below gets displayed.
- The example displays the progress bar which indicates how long an
operation will take to complete the process and displays the different
types of progress bars to indicate activity.
No comments:
Post a Comment