首页 > 移动平台 > 详细

移动端安卓和IOS开发框架Framework7教程-进度条Progress Bar

时间：2016-05-21 02:15:30      阅读：342      评论：0      收藏：0      [点我收藏+]

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:

  1. <div?class="progressbar"?data-progress="20">
  2. ????<span></span>
  3. </div>
复制

or:

  1. <span?class="progressbar"?data-progress="50">
  2. ????<span></span>
  3. </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:

  1. <div?class="progressbar-infinite"></div>
复制

or:

  1. <span?class="progressbar-infinite"></span>
复制

Multi-color:

  1. <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

实例预览

  1. <div?class="page-content">
  2. ??<div?class="content-block-title">Determinate?Progress?Bar</div>
  3. ??<div?class="content-block">
  4. ????<div?class="content-block-inner">
  5. ??????<p>Inline?determinate?progress?bar:</p>
  6. ??????<div?class="demo-progressbar-inline">
  7. ????????<p><span?data-progress="10"?class="progressbar"></span></p>
  8. ????????<p?class="buttons-row">
  9. ??????????<a?href="#"?data-progress="10"?class="button">10%</a>
  10. ??????????<a?href="#"?data-progress="30"?class="button">30%</a>
  11. ??????????<a?href="#"?data-progress="50"?class="button">50%</a>
  12. ??????????<a?href="#"?data-progress="100"?class="button">100%</a>
  13. ????????</p>
  14. ??????</div>
  15. ??????<p>Inline?determinate?load?&?hide:</p>
  16. ??????<div?class="demo-progressbar-load-hide">
  17. ????????<p?style="height:2px"></p>
  18. ????????<p><a?href="#"?class="button">Start?Loading</a></p>
  19. ??????</div>
  20. ??????<p>Overlay?with?determinate?progress?bar?on?top?of?the?app:</p>
  21. ??????<p?class="demo-progressbar-overlay"><a?href="#"?class="button">Start?Loading</a></p>
  22. ????</div>
  23. ??</div>
  24. ??<div?class="content-block-title">Infinite?Progress?Bar</div>
  25. ??<div?class="content-block">
  26. ????<div?class="content-block-inner">
  27. ??????<p>Inline?infinite?progress?bar</p>
  28. ??????<p><span?class="progressbar-infinite"></span></p>
  29. ??????<p>Multi-color?infinite?progress?bar</p>
  30. ??????<p><span?class="progressbar-infinite?color-multi"></span></p>
  31. ??????<p>Overlay?with?infinite?progress?bar?on?top?of?the?app</p>
  32. ??????<p?class="demo-progressbar-infinite-overlay"><a?href="#"?class="button">Start?Loading</a></p>
  33. ??????<p>Overlay?with?infinite?multi-color?progress?bar?on?top?of?the?app</p>
  34. ??????<p?class="demo-progressbar-infinite-multi-overlay"><a?href="#"?class="button">Start?Loading</a></p>
  35. ????</div>
  36. ??</div>
  37. ??<div?class="content-block-title">Colored</div>
  38. ??<div?class="list-block">
  39. ????<ul>
  40. ??????<li?class="item-content">
  41. ????????<div?class="item-inner">
  42. ??????????<div?data-progress="10"?class="progressbar?color-blue"></div>
  43. ????????</div>
  44. ??????</li>
  45. ??????<li?class="item-content">
  46. ????????<div?class="item-inner">
  47. ??????????<div?data-progress="20"?class="progressbar?color-orange"></div>
  48. ????????</div>
  49. ??????</li>
  50. ??????<li?class="item-content">
  51. ????????<div?class="item-inner">
  52. ??????????<div?data-progress="30"?class="progressbar?color-red"></div>
  53. ????????</div>
  54. ??????</li>
  55. ??????<li?class="item-content">
  56. ????????<div?class="item-inner">
  57. ??????????<div?data-progress="40"?class="progressbar?color-pink"></div>
  58. ????????</div>
  59. ??????</li>
  60. ??????<li?class="item-content">
  61. ????????<div?class="item-inner">
  62. ??????????<div?data-progress="50"?class="progressbar?color-green"></div>
  63. ????????</div>
  64. ??????</li>
  65. ??????<li?class="item-content">
  66. ????????<div?class="item-inner">
  67. ??????????<div?data-progress="60"?class="progressbar?color-lightblue"></div>
  68. ????????</div>
  69. ??????</li>
  70. ??????<li?class="item-content">
  71. ????????<div?class="item-inner">
  72. ??????????<div?data-progress="70"?class="progressbar?color-yellow"></div>
  73. ????????</div>
  74. ??????</li>
  75. ??????<li?class="item-content">
  76. ????????<div?class="item-inner">
  77. ??????????<div?data-progress="80"?class="progressbar?color-gray"></div>
  78. ????????</div>
  79. ??????</li>
  80. ??????<li?class="item-content">
  81. ????????<div?class="item-inner">
  82. ??????????<div?data-progress="90"?class="progressbar?color-black"></div>
  83. ????????</div>
  84. ??????</li>
  85. ??????<li?style="background-color:?#999"?class="item-content">
  86. ????????<div?class="item-inner">
  87. ??????????<div?data-progress="95"?class="progressbar?color-white"></div>
  88. ????????</div>
  89. ??????</li>
  90. ????</ul>
  91. ??</div>
  92. </div>
复制
  1. var?myApp?=?new?Framework7();
  2. var?$$?=?Dom7;
  3. ?
  4. $$(‘.demo-progressbar-inline?.button‘).on(‘click‘,?function?()?{
  5. ????var?progress?=?$$(this).attr(‘data-progress‘);
  6. ????var?progressbar?=?$$(‘.demo-progressbar-inline?.progressbar‘);
  7. ????myApp.setProgressbar(progressbar,?progress);
  8. });
  9. $$(‘.demo-progressbar-load-hide?.button‘).on(‘click‘,?function?()?{
  10. ????var?container?=?$$(‘.demo-progressbar-load-hide?p:first-child‘);
  11. ????if?(container.children(‘.progressbar‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  12. ?
  13. ????myApp.showProgressbar(container,?0);
  14. ?
  15. ????//?Simluate?Loading?Something
  16. ????var?progress?=?0;
  17. ????function?simulateLoading()?{
  18. ????????setTimeout(function?()?{
  19. ????????????var?progressBefore?=?progress;
  20. ????????????progress?+=?Math.random()?*?20;
  21. ????????????myApp.setProgressbar(container,?progress);
  22. ????????????if?(progressBefore?<?100)?{
  23. ????????????????simulateLoading();?//keep?"loading"
  24. ????????????}
  25. ????????????else?myApp.hideProgressbar(container);?//hide
  26. ????????},?Math.random()?*?200?+?200);
  27. ????}
  28. ????simulateLoading();
  29. });
  30. $$(‘.demo-progressbar-overlay?.button‘).on(‘click‘,?function?()?{
  31. ????//?Add?Directly?To?Body
  32. ????var?container?=?$$(‘body‘);
  33. ????if?(container.children(‘.progressbar,?.progressbar-infinite‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  34. ?
  35. ????myApp.showProgressbar(container,?0);
  36. ?
  37. ????//?Simluate?Loading?Something
  38. ????var?progress?=?0;
  39. ????function?simulateLoading()?{
  40. ????????setTimeout(function?()?{
  41. ????????????var?progressBefore?=?progress;
  42. ????????????progress?+=?Math.random()?*?20;
  43. ????????????myApp.setProgressbar(container,?progress);
  44. ????????????if?(progressBefore?<?100)?{
  45. ????????????????simulateLoading();?//keep?"loading"
  46. ????????????}
  47. ????????????else?myApp.hideProgressbar(container);?//hide
  48. ????????},?Math.random()?*?200?+?200);
  49. ????}
  50. ????simulateLoading();
  51. });
  52. $$(‘.demo-progressbar-infinite-overlay?.button‘).on(‘click‘,?function?()?{
  53. ????//?Add?Directly?To?Body
  54. ????var?container?=?$$(‘body‘);
  55. ????if?(container.children(‘.progressbar,?.progressbar-infinite‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  56. ????myApp.showProgressbar(container);
  57. ????setTimeout(function?()?{
  58. ????????myApp.hideProgressbar();
  59. ????},?3000);
  60. });
  61. $$(‘.demo-progressbar-infinite-multi-overlay?.button‘).on(‘click‘,?function?()?{
  62. ????var?container?=?$$(‘body‘);
  63. ????if?(container.children(‘.progressbar,?.progressbar-infinite‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  64. ????myApp.showProgressbar(container,?‘multi‘);
  65. ????setTimeout(function?()?{
  66. ????????myApp.hideProgressbar();
  67. ????},?3000);
  68. });
复制

Material Theme Examples

实例预览

  1. <div?class="page-content">
  2. ??<div?class="content-block-title">Determinate?Progress?Bar</div>
  3. ??<div?class="content-block">
  4. ????<div?class="content-block-inner">
  5. ??????<p>Inline?determinate?progress?bar:</p>
  6. ??????<div?class="demo-progressbar-inline">
  7. ????????<p><span?data-progress="10"?class="progressbar"></span></p>
  8. ????????<p?class="buttons-row">
  9. ??????????<a?href="#"?data-progress="10"?class="button?button-raised">10%</a>
  10. ??????????<a?href="#"?data-progress="30"?class="button?button-raised">30%</a>
  11. ??????????<a?href="#"?data-progress="50"?class="button?button-raised">50%</a>
  12. ??????????<a?href="#"?data-progress="100"?class="button?button-raised">100%</a>
  13. ????????</p>
  14. ??????</div>
  15. ??????<p>Inline?determinate?load?&?hide:</p>
  16. ??????<div?class="demo-progressbar-load-hide">
  17. ????????<p?style="height:2px"></p>
  18. ????????<p><a?href="#"?class="button?button-raised">Start?Loading</a></p>
  19. ??????</div>
  20. ??????<p>Overlay?with?determinate?progress?bar?on?top?of?the?app:</p>
  21. ??????<p?class="demo-progressbar-overlay"><a?href="#"?class="button?button-raised">Start?Loading</a></p>
  22. ????</div>
  23. ??</div>
  24. ??<div?class="content-block-title">Infinite?Progress?Bar</div>
  25. ??<div?class="content-block">
  26. ????<div?class="content-block-inner">
  27. ??????<p>Inline?infinite?progress?bar</p>
  28. ??????<p><span?class="progressbar-infinite"></span></p>
  29. ??????<p>Multi-color?infinite?progress?bar</p>
  30. ??????<p><span?class="progressbar-infinite?color-multi"></span></p>
  31. ??????<p>Overlay?with?infinite?progress?bar?on?top?of?the?app</p>
  32. ??????<p?class="demo-progressbar-infinite-overlay"><a?href="#"?class="button?button-raised">Start?Loading</a></p>
  33. ??????<p>Overlay?with?infinite?multi-color?progress?bar?on?top?of?the?app</p>
  34. ??????<p?class="demo-progressbar-infinite-multi-overlay"><a?href="#"?class="button?button-raised">Start?Loading</a></p>
  35. ????</div>
  36. ??</div>
  37. ??<div?class="content-block-title">Colored</div>
  38. ??<div?class="list-block">
  39. ????<ul>
  40. ??????<li?class="item-content">
  41. ????????<div?class="item-inner">
  42. ??????????<div?data-progress="5"?class="progressbar?color-red"></div>
  43. ????????</div>
  44. ??????</li>
  45. ??????<li?class="item-content">
  46. ????????<div?class="item-inner">
  47. ??????????<div?data-progress="10"?class="progressbar?color-pink"></div>
  48. ????????</div>
  49. ??????</li>
  50. ??????<li?class="item-content">
  51. ????????<div?class="item-inner">
  52. ??????????<div?data-progress="15"?class="progressbar?color-purple"></div>
  53. ????????</div>
  54. ??????</li>
  55. ??????<li?class="item-content">
  56. ????????<div?class="item-inner">
  57. ??????????<div?data-progress="20"?class="progressbar?color-deeppurple"></div>
  58. ????????</div>
  59. ??????</li>
  60. ??????<li?class="item-content">
  61. ????????<div?class="item-inner">
  62. ??????????<div?data-progress="25"?class="progressbar?color-indigo"></div>
  63. ????????</div>
  64. ??????</li>
  65. ??????<li?class="item-content">
  66. ????????<div?class="item-inner">
  67. ??????????<div?data-progress="30"?class="progressbar?color-blue"></div>
  68. ????????</div>
  69. ??????</li>
  70. ??????<li?class="item-content">
  71. ????????<div?class="item-inner">
  72. ??????????<div?data-progress="35"?class="progressbar?color-lightblue"></div>
  73. ????????</div>
  74. ??????</li>
  75. ??????<li?class="item-content">
  76. ????????<div?class="item-inner">
  77. ??????????<div?data-progress="40"?class="progressbar?color-cyan"></div>
  78. ????????</div>
  79. ??????</li>
  80. ??????<li?class="item-content">
  81. ????????<div?class="item-inner">
  82. ??????????<div?data-progress="45"?class="progressbar?color-teal"></div>
  83. ????????</div>
  84. ??????</li>
  85. ??????<li?class="item-content">
  86. ????????<div?class="item-inner">
  87. ??????????<div?data-progress="50"?class="progressbar?color-green"></div>
  88. ????????</div>
  89. ??????</li>
  90. ??????<li?class="item-content">
  91. ????????<div?class="item-inner">
  92. ??????????<div?data-progress="55"?class="progressbar?color-lightgreen"></div>
  93. ????????</div>
  94. ??????</li>
  95. ??????<li?class="item-content">
  96. ????????<div?class="item-inner">
  97. ??????????<div?data-progress="60"?class="progressbar?color-lime"></div>
  98. ????????</div>
  99. ??????</li>
  100. ??????<li?class="item-content">
  101. ????????<div?class="item-inner">
  102. ??????????<div?data-progress="65"?class="progressbar?color-yellow"></div>
  103. ????????</div>
  104. ??????</li>
  105. ??????<li?class="item-content">
  106. ????????<div?class="item-inner">
  107. ??????????<div?data-progress="70"?class="progressbar?color-amber"></div>
  108. ????????</div>
  109. ??????</li>
  110. ??????<li?class="item-content">
  111. ????????<div?class="item-inner">
  112. ??????????<div?data-progress="75"?class="progressbar?color-orange"></div>
  113. ????????</div>
  114. ??????</li>
  115. ??????<li?class="item-content">
  116. ????????<div?class="item-inner">
  117. ??????????<div?data-progress="80"?class="progressbar?color-deeporange"></div>
  118. ????????</div>
  119. ??????</li>
  120. ??????<li?class="item-content">
  121. ????????<div?class="item-inner">
  122. ??????????<div?data-progress="85"?class="progressbar?color-brown"></div>
  123. ????????</div>
  124. ??????</li>
  125. ??????<li?class="item-content">
  126. ????????<div?class="item-inner">
  127. ??????????<div?data-progress="90"?class="progressbar?color-gray"></div>
  128. ????????</div>
  129. ??????</li>
  130. ??????<li?class="item-content">
  131. ????????<div?class="item-inner">
  132. ??????????<div?data-progress="95"?class="progressbar?color-bluegray"></div>
  133. ????????</div>
  134. ??????</li>
  135. ??????<li?class="item-content">
  136. ????????<div?class="item-inner">
  137. ??????????<div?data-progress="100"?class="progressbar?color-black"></div>
  138. ????????</div>
  139. ??????</li>
  140. ??????<li?style="background-color:?#999"?class="item-content">
  141. ????????<div?class="item-inner">
  142. ??????????<div?data-progress="95"?class="progressbar?color-white"></div>
  143. ????????</div>
  144. ??????</li>
  145. ????</ul>
  146. ??</div>
  147. </div>
复制
  1. var?myApp?=?new?Framework7({
  2. ??material:?true
  3. });
  4. var?$$?=?Dom7;
  5. ?
  6. $$(‘.demo-progressbar-inline?.button‘).on(‘click‘,?function?()?{
  7. ????var?progress?=?$$(this).attr(‘data-progress‘);
  8. ????var?progressbar?=?$$(‘.demo-progressbar-inline?.progressbar‘);
  9. ????myApp.setProgressbar(progressbar,?progress);
  10. });
  11. $$(‘.demo-progressbar-load-hide?.button‘).on(‘click‘,?function?()?{
  12. ????var?container?=?$$(‘.demo-progressbar-load-hide?p:first-child‘);
  13. ????if?(container.children(‘.progressbar‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  14. ?
  15. ????myApp.showProgressbar(container,?0);
  16. ?
  17. ????//?Simluate?Loading?Something
  18. ????var?progress?=?0;
  19. ????function?simulateLoading()?{
  20. ????????setTimeout(function?()?{
  21. ????????????var?progressBefore?=?progress;
  22. ????????????progress?+=?Math.random()?*?20;
  23. ????????????myApp.setProgressbar(container,?progress);
  24. ????????????if?(progressBefore?<?100)?{
  25. ????????????????simulateLoading();?//keep?"loading"
  26. ????????????}
  27. ????????????else?myApp.hideProgressbar(container);?//hide
  28. ????????},?Math.random()?*?200?+?200);
  29. ????}
  30. ????simulateLoading();
  31. });
  32. $$(‘.demo-progressbar-overlay?.button‘).on(‘click‘,?function?()?{
  33. ????//?Add?Directly?To?Body
  34. ????var?container?=?$$(‘body‘);
  35. ????if?(container.children(‘.progressbar,?.progressbar-infinite‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  36. ?
  37. ????myApp.showProgressbar(container,?0,?‘yellow‘);
  38. ?
  39. ????//?Simluate?Loading?Something
  40. ????var?progress?=?0;
  41. ????function?simulateLoading()?{
  42. ????????setTimeout(function?()?{
  43. ????????????var?progressBefore?=?progress;
  44. ????????????progress?+=?Math.random()?*?20;
  45. ????????????myApp.setProgressbar(container,?progress);
  46. ????????????if?(progressBefore?<?100)?{
  47. ????????????????simulateLoading();?//keep?"loading"
  48. ????????????}
  49. ????????????else?myApp.hideProgressbar(container);?//hide
  50. ????????},?Math.random()?*?200?+?200);
  51. ????}
  52. ????simulateLoading();
  53. });
  54. $$(‘.demo-progressbar-infinite-overlay?.button‘).on(‘click‘,?function?()?{
  55. ????var?container?=?$$(‘body‘);
  56. ????if?(container.children(‘.progressbar,?.progressbar-infinite‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  57. ????myApp.showProgressbar(container,?‘yellow‘);
  58. ????setTimeout(function?()?{
  59. ????????myApp.hideProgressbar();
  60. ????},?5000);
  61. });
  62. $$(‘.demo-progressbar-infinite-multi-overlay?.button‘).on(‘click‘,?function?()?{
  63. ????var?container?=?$$(‘body‘);
  64. ????if?(container.children(‘.progressbar,?.progressbar-infinite‘).length)?return;?//don‘t?run?all?this?if?there?is?a?current?progressbar?loading
  65. ????myApp.showProgressbar(container,?‘multi‘);
  66. ????setTimeout(function?()?{
  67. ????????myApp.hideProgressbar();
  68. ????},?5000);
  69. });
复制

?

移动端安卓和IOS开发框架Framework7教程-进度条Progress Bar

原文：http://zaixianshouce.iteye.com/blog/2298553
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！