framework7.angular

.page(data-page="progressbar") .navbar .navbar-inner .left a(href="index.html").back.link.icon-only i.icon.icon-back .center Progress Bar .right a(href="#").open-panel.link.icon-only i.icon.icon-bars .page-content .content-block p In addition to <a href="preloader.html">Preloader</a>, Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate some activity. .content-block-title Determinate Progress Bar .content-block .content-block-inner p When progress bar is determinate it indicates how long an operation will take when the percentage complete is detectable. p Inline determinate progress bar: .ks-demo-progressbar-inline p span.progressbar(data-progress="10") p.buttons-row a(href="#", data-progress="10").button.button-raised 10% a(href="#", data-progress="30").button.button-raised 30% a(href="#", data-progress="50").button.button-raised 50% a(href="#", data-progress="100").button.button-raised 100% p Inline determinate load & hide: .ks-demo-progressbar-load-hide p(style="height:2px") p a(href="#").button.button-raised Start Loading p Overlay with determinate progress bar on top of the app: p.ks-demo-progressbar-overlay a(href="#").button.button-raised Start Loading .content-block-title Infinite Progress Bar .content-block .content-block-inner p When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take. p Inline infinite progress bar p span.progressbar-infinite p Multi-color infinite progress bar p span.progressbar-infinite.color-multi p Overlay with infinite progress bar on top of the app p.ks-demo-progressbar-infinite-overlay a(href="#").button.button-raised Start Loading p Overlay with infinite multi-color progress bar on top of the app p.ks-demo-progressbar-infinite-multi-overlay a(href="#").button.button-raised Start Loading .content-block-title Colored .list-block ul li.item-content .item-inner .progressbar.color-red(data-progress="5") li.item-content .item-inner .progressbar.color-pink(data-progress="10") li.item-content .item-inner .progressbar.color-purple(data-progress="15") li.item-content .item-inner .progressbar.color-deeppurple(data-progress="20") li.item-content .item-inner .progressbar.color-indigo(data-progress="25") li.item-content .item-inner .progressbar.color-blue(data-progress="30") li.item-content .item-inner .progressbar.color-lightblue(data-progress="35") li.item-content .item-inner .progressbar.color-cyan(data-progress="40") li.item-content .item-inner .progressbar.color-teal(data-progress="45") li.item-content .item-inner .progressbar.color-green(data-progress="50") li.item-content .item-inner .progressbar.color-lightgreen(data-progress="55") li.item-content .item-inner .progressbar.color-lime(data-progress="60") li.item-content .item-inner .progressbar.color-yellow(data-progress="65") li.item-content .item-inner .progressbar.color-amber(data-progress="70") li.item-content .item-inner .progressbar.color-orange(data-progress="75") li.item-content .item-inner .progressbar.color-deeporange(data-progress="80") li.item-content .item-inner .progressbar.color-brown(data-progress="85") li.item-content .item-inner .progressbar.color-gray(data-progress="90") li.item-content .item-inner .progressbar.color-bluegray(data-progress="95") li.item-content .item-inner .progressbar.color-black(data-progress="100") li.item-content(style="background-color: #999") .item-inner .progressbar.color-white(data-progress="95")