In addition to Preloader Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate activity.
By default, Preloader available in two colors: the default is for a light background and another one for dark background. The HTML is pretty easy, just create any element (for example <span>) with "preloader" class:
Determinate Progress Bar
When progress bar is determinate it indicates how long an operation will take when the percentage complete is detectable.
Let's look at layout of determinate progress bar:
- <div class="progressbar" data-progress="20">
- <span></span>
- </div>
or:
- <span class="progressbar" data-progress="50">
- <span></span>
- </span>
Where data-progress="20" - currently set progress (in percents). Note that this data attribute sets progress only on page load. If you need to change it later it should be done via API
Infinite Progress Bar
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.
Let's look at layout of infinite progress bar:
- <div class="progressbar-infinite"></div>
or:
- <span class="progressbar-infinite"></span>
Multi-color:
- <div class="progressbar-infinite color-multi"></div>
Progress Bar JavaScript API
Progress Bar comes with JavaScript API that allows you to control Progress Bar's progress, show and hide it. Let's look on appropriate App's properties and methods:
myApp.setProgressbar(container, progress, speed) - set progress for Determinate Progress Bar.
- container - string or HTMLElement. Progress bar element container or element containing progress bar element. If string - CSS selector of such element. If not specified then it is equal to
'body'
- progress - number. Progress in percents (from 0 to 100)
- speed - number. Transition duration of progress change animation (in ms)
- This method returns Progress Bar container HTMLElement
myApp.hideProgressbar(container) - hide Progress Bar.
- container - string or HTMLElement. Progress bar element container or element containing progress bar element. If string - CSS selector of such element. If not specified then it is equal to
'body'
myApp.showProgressbar(container, progress, color) - create and show or just show (if already presented) Determinate Progress Bar
- container - string or HTMLElement. Progress bar element container or element containing progress bar element. If string - CSS selector of such element. If not specified then it is equal to
'body'
- progress - number. Progress in percents (from 0 to 100)
- color - string. Color of progress bar, for example "white", "red", etc. from available color themes. Optional
- This method returns Progress Bar container HTMLElement
Shortcuts Methods
myApp.showProgressbar(container, color) - create and show or just show (if already presented) Infinite Progress Bar
- container - string or HTMLElement. Progress bar element container or element containing progress bar element. If string - CSS selector of such element. If not specified then it is equal to
'body'
- progress - number. Progress in percents (from 0 to 100)
- color - string. Color of progress bar, for example "white", "red", etc. from available color themes. Optional
myApp.showProgressbar(progress, color) - create and show or just show (if already presented) Determinate Progress Bar as overlay element(<body>
's child)
- progress - number. Progress in percents (from 0 to 100)
- color - string. Color of progress bar, for example "white", "red", etc. from available color themes. Optional
myApp.showProgressbar() - create and show or just show (if already presented) Infinite Progress Bar as overlay element(<body>
's child)
iOS Theme Examples
- <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="demo-progressbar-inline">
- <p><span data-progress="10" class="progressbar"></span></p>
- <p class="buttons-row">
- <a href="#" data-progress="10" class="button">10%</a>
- <a href="#" data-progress="30" class="button">30%</a>
- <a href="#" data-progress="50" class="button">50%</a>
- <a href="#" data-progress="100" class="button">100%</a>
- </p>
- </div>
- <p>Inline determinate load & hide:</p>
- <div class="demo-progressbar-load-hide">
- <p style="height:2px"></p>
- <p><a href="#" class="button">Start Loading</a></p>
- </div>
- <p>Overlay with determinate progress bar on top of the app:</p>
- <p class="demo-progressbar-overlay"><a href="#" class="button">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>Multi-color infinite progress bar</p>
- <p><span class="progressbar-infinite color-multi"></span></p>
- <p>Overlay with infinite progress bar on top of the app</p>
- <p class="demo-progressbar-infinite-overlay"><a href="#" class="button">Start Loading</a></p>
- <p>Overlay with infinite multi-color progress bar on top of the app</p>
- <p class="demo-progressbar-infinite-multi-overlay"><a href="#" class="button">Start Loading</a></p>
- </div>
- </div>
- <div class="content-block-title">Colored</div>
- <div class="list-block">
- <ul>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="10" class="progressbar color-blue"></div>
- </div>
- </li>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="20" class="progressbar color-orange"></div>
- </div>
- </li>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="30" class="progressbar color-red"></div>
- </div>
- </li>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="40" class="progressbar color-pink"></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-lightblue"></div>
- </div>
- </li>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="70" class="progressbar color-yellow"></div>
- </div>
- </li>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="80" class="progressbar color-gray"></div>
- </div>
- </li>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="90" class="progressbar color-black"></div>
- </div>
- </li>
- <li style="background-color: #999" class="item-content">
- <div class="item-inner">
- <div data-progress="95" class="progressbar color-white"></div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- var myApp = new Framework7();
- var $$ = Dom7;
- $$('.demo-progressbar-inline .button').on('click', function () {
- var progress = $$(this).attr('data-progress');
- var progressbar = $$('.demo-progressbar-inline .progressbar');
- myApp.setProgressbar(progressbar, progress);
- });
- $$('.demo-progressbar-load-hide .button').on('click', function () {
- var container = $$('.demo-progressbar-load-hide p:first-child');
- if (container.children('.progressbar').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container, 0);
- // Simluate Loading Something
- var progress = 0;
- function simulateLoading() {
- setTimeout(function () {
- var progressBefore = progress;
- progress += Math.random() * 20;
- myApp.setProgressbar(container, progress);
- if (progressBefore < 100) {
- simulateLoading(); //keep "loading"
- }
- else myApp.hideProgressbar(container); //hide
- }, Math.random() * 200 + 200);
- }
- simulateLoading();
- });
- $$('.demo-progressbar-overlay .button').on('click', function () {
- // Add Directly To Body
- var container = $$('body');
- if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container, 0);
- // Simluate Loading Something
- var progress = 0;
- function simulateLoading() {
- setTimeout(function () {
- var progressBefore = progress;
- progress += Math.random() * 20;
- myApp.setProgressbar(container, progress);
- if (progressBefore < 100) {
- simulateLoading(); //keep "loading"
- }
- else myApp.hideProgressbar(container); //hide
- }, Math.random() * 200 + 200);
- }
- simulateLoading();
- });
- $$('.demo-progressbar-infinite-overlay .button').on('click', function () {
- // Add Directly To Body
- var container = $$('body');
- if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container);
- setTimeout(function () {
- myApp.hideProgressbar();
- }, 3000);
- });
- $$('.demo-progressbar-infinite-multi-overlay .button').on('click', function () {
- var container = $$('body');
- if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container, 'multi');
- setTimeout(function () {
- myApp.hideProgressbar();
- }, 3000);
- });
Material Theme Examples
- <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="demo-progressbar-inline">
- <p><span data-progress="10" class="progressbar"></span></p>
- <p class="buttons-row">
- <a href="#" data-progress="10" class="button button-raised">10%</a>
- <a href="#" data-progress="30" class="button button-raised">30%</a>
- <a href="#" data-progress="50" class="button button-raised">50%</a>
- <a href="#" data-progress="100" class="button button-raised">100%</a>
- </p>
- </div>
- <p>Inline determinate load & hide:</p>
- <div class="demo-progressbar-load-hide">
- <p style="height:2px"></p>
- <p><a href="#" class="button button-raised">Start Loading</a></p>
- </div>
- <p>Overlay with determinate progress bar on top of the app:</p>
- <p class="demo-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>Multi-color infinite progress bar</p>
- <p><span class="progressbar-infinite color-multi"></span></p>
- <p>Overlay with infinite progress bar on top of the app</p>
- <p class="demo-progressbar-infinite-overlay"><a href="#" class="button button-raised">Start Loading</a></p>
- <p>Overlay with infinite multi-color progress bar on top of the app</p>
- <p class="demo-progressbar-infinite-multi-overlay"><a href="#" class="button button-raised">Start Loading</a></p>
- </div>
- </div>
- <div class="content-block-title">Colored</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="15" class="progressbar color-purple"></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="25" class="progressbar color-indigo"></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="35" class="progressbar color-lightblue"></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="45" class="progressbar color-teal"></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="55" class="progressbar color-lightgreen"></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="65" class="progressbar color-yellow"></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="75" class="progressbar color-orange"></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="85" class="progressbar color-brown"></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="95" class="progressbar color-bluegray"></div>
- </div>
- </li>
- <li class="item-content">
- <div class="item-inner">
- <div data-progress="100" class="progressbar color-black"></div>
- </div>
- </li>
- <li style="background-color: #999" class="item-content">
- <div class="item-inner">
- <div data-progress="95" class="progressbar color-white"></div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- var myApp = new Framework7({
- material: true
- });
- var $$ = Dom7;
- $$('.demo-progressbar-inline .button').on('click', function () {
- var progress = $$(this).attr('data-progress');
- var progressbar = $$('.demo-progressbar-inline .progressbar');
- myApp.setProgressbar(progressbar, progress);
- });
- $$('.demo-progressbar-load-hide .button').on('click', function () {
- var container = $$('.demo-progressbar-load-hide p:first-child');
- if (container.children('.progressbar').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container, 0);
- // Simluate Loading Something
- var progress = 0;
- function simulateLoading() {
- setTimeout(function () {
- var progressBefore = progress;
- progress += Math.random() * 20;
- myApp.setProgressbar(container, progress);
- if (progressBefore < 100) {
- simulateLoading(); //keep "loading"
- }
- else myApp.hideProgressbar(container); //hide
- }, Math.random() * 200 + 200);
- }
- simulateLoading();
- });
- $$('.demo-progressbar-overlay .button').on('click', function () {
- // Add Directly To Body
- var container = $$('body');
- if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container, 0, 'yellow');
- // Simluate Loading Something
- var progress = 0;
- function simulateLoading() {
- setTimeout(function () {
- var progressBefore = progress;
- progress += Math.random() * 20;
- myApp.setProgressbar(container, progress);
- if (progressBefore < 100) {
- simulateLoading(); //keep "loading"
- }
- else myApp.hideProgressbar(container); //hide
- }, Math.random() * 200 + 200);
- }
- simulateLoading();
- });
- $$('.demo-progressbar-infinite-overlay .button').on('click', function () {
- var container = $$('body');
- if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container, 'yellow');
- setTimeout(function () {
- myApp.hideProgressbar();
- }, 5000);
- });
- $$('.demo-progressbar-infinite-multi-overlay .button').on('click', function () {
- var container = $$('body');
- if (container.children('.progressbar, .progressbar-infinite').length) return; //don't run all this if there is a current progressbar loading
- myApp.showProgressbar(container, 'multi');
- setTimeout(function () {
- myApp.hideProgressbar();
- }, 5000);
- });
相关推荐
在iOS开发中,进度条(Progress Bar)是用户界面中不可或缺的一部分,用于显示任务的进度或状态。本项目“(0106)-iOS/iPhone/iPad/iPod源代码-进度条(Progress)-Customized Progress Bar”专注于自定义进度条的...
在iOS开发中,UI设计是用户体验的关键组成部分,而进度条(Progress View)是常见的界面元素,用于展示任务的完成程度。本项目“(0019)-iOS/iPhone/iPAD/iPod源代码-进度条(Progress)-Customized Progress ...
在iOS开发中,创建美观且功能丰富的用户界面是至关重要的,而进度条是其中不可或缺的元素之一。"(0044)-iOS/iPhone/iPad/iPod源代码-进度条(Progress)-Circular Progress"这个项目专注于实现一种特殊的进度条...
实现饼状图样式的进度条。即进度条的进度显示成饼状图的样式。下载的代码其实是一个比较完整的代码库,叫做SSToolkit。SSToolkit代码库是作者将他在app中实现的各种各样的UI效果做成个代码库,方便其他人使用。实现...
本教程将围绕“(0129)-iOS/iPhone/iPAD/iPod源代码-进度条(Progress)-Colored ProgressView”这一主题,详细讲解如何自定义UIProgressView的颜色,以便让进度条更加符合你的应用设计。 首先,我们需要了解...
在IT行业中,进度条是一种非常常见的用户界面元素,它用于显示任务执行的进度,比如文件下载、...尽管现在的移动开发更多关注Android和iOS,但这些基础知识仍然适用于理解UI设计原理,对其他平台的开发也有启示作用。
Framework7 是免费开源的 HTML 移动端框架,用来开发混合移动端应用或者 iOS 7 的 Web 应用,并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。Framework7 使用 Javascript,CSS 和 HTML 来...
在iOS开发中,有时我们需要创建定制的UI组件来满足特定的设计需求,比如半圆进度条。这个"ios-半圆进度条.zip"压缩包显然包含了实现这种效果的相关资源和代码。接下来,我们将深入探讨如何利用第三方绘图框架TKit和...
显示进度条,[BMCProGress showProGress]; 隐藏进度条,[BMCProGress hidenProGress]; 自定义进度条位置,[BMCProGress showProGressWithY:100.0]; 如果不点击结束的话,他会一直停留在最右边的边缘位置,...
在cocos2d-x游戏开发中,进度条(Progress)是一种常见的UI元素,它用于显示任务、加载数据或表示某个过程的完成度。本学习笔记将深入探讨如何在cocos2d-x框架下创建和使用进度条。首先,我们要了解cocos2d-x的核心...
之前遇到的需求,ios上没有类似的实现。搞了好久在网上搜了很多资料都不能解决最后找到了一个c/c++的底层源码,才实现了最后整理了下上传了。是个ios的demo很详细你定能看懂的。运行在xcode环境下,关键算法的文件是...
在iOS开发中,创建自定义进度条是提升用户体验和界面美观度的重要手段。"iPhone之实现自定义进度条Progress"这个主题将引导我们探讨如何在iPhone应用中利用Swift编程语言来设计并实现一个个性化的进度条组件。我们将...
framework7-icons, Framework7的免费iOS图标字体 Framework7图标Framework7的高级和免费ios图标字体。这种字体可以用在 Framework7插件中,但是你可以在任何地方看到它适合它,个人或者商业。 它是免费的使用和许可...
Objective-C是苹果公司开发的一种面向对象的编程语言,广泛应用于MacOS和iOS平台的软件开发。Cocoa是Apple为这两种操作系统提供的原生开发框架,包含了大量用于构建图形用户界面、处理事件、管理文件系统等任务的...
iPhone开发入门到精通视频教程资源目录:【】iOS开发源码系列---工具【】iOS开发源码系列---应用【】iOS开发源码系列---游戏【】iOS开发源码系列---类库与框架【】iOS开发真机测试与发布【】iOS开发视频教程01~05...
Framework7是一款免费、开源的移动应用框架,旨在为开发者提供构建iOS和Android应用的全套工具。它提供了丰富的组件库,包括导航、表单、视图、滑块等,使开发者能够轻松实现原生应用的界面和交互效果。 二、Vue.js...
在iOS应用开发中,使用各种框架能够极大地提升开发效率,优化用户体验。以下是对标题和描述中提及的四个关键框架的详细解释: 1. **数据请求框架**:在iOS开发中,最常用的数据请求框架是AFNetworking。这是一个...
本项目聚焦于“Android高仿iOS加载数据时的圆形进度条”,这涉及到UI设计和自定义视图的知识点。iOS的加载进度条通常呈现出简洁、优雅的圆形设计,而Android原生的ProgressBar虽然功能强大,但在样式上可能无法直接...
在iOS开发中,Swift语言提供了丰富的工具和控件来创建用户友好的界面。"Swift - 进度条工具"是一个专为实现动态进度显示而设计的组件,它可以帮助开发者在应用中实现各种自定义的进度条功能。这个工具集成了多项关键...