首页>>表单>>Ladda 应用提交表单的时候显示loading加载中 包括不同位置，不同效果(2013-12-06)

Ladda 应用提交表单的时候显示loading加载中 包括不同位置，不同效果

 不同大小，位置，效果，进度条等

Ladda 应用提交表单的时候显示loading加载中 包括不同位置，不同效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <article class="examples" style="margin-top:0px;">  
  2. <section class="button-demo">  
  3. <h3>expand-left</h3>  
  4. <button class="ladda-button" data-color="green" data-style="expand-left">Submit</button>  
  5. </section>  
  6. <section class="button-demo">  
  7. <h3>expand-right</h3>  
  8. <button class="ladda-button" data-color="green" data-style="expand-right">Submit</button>  
  9. </section>  
  10. <section class="button-demo">  
  11. <h3>expand-up</h3>  
  12. <button class="ladda-button" data-color="green" data-style="expand-up">Submit</button>  
  13. </section>  
  14. <section class="button-demo">  
  15. <h3>expand-down</h3>  
  16. <button class="ladda-button" data-color="green" data-style="expand-down">Submit</button>  
  17. </section>  
  18. <section class="button-demo">  
  19. <h3>contract</h3>  
  20. <button class="ladda-button" data-color="red" data-style="contract">Submit</button>  
  21. </section>  
  22. <section class="button-demo">  
  23. <h3>contract-overlay</h3>  
  24. <button class="ladda-button" data-color="red" data-style="contract-overlay" style="z-index: 10;">Submit</button>  
  25. </section>  
  26. <section class="button-demo">  
  27. <h3>zoom-in</h3>  
  28. <button class="ladda-button" data-color="red" data-style="zoom-in">Submit</button>  
  29. </section>  
  30. <section class="button-demo">  
  31. <h3>zoom-out</h3>  
  32. <button class="ladda-button" data-color="red" data-style="zoom-out">Submit</button>  
  33. </section>  
  34. <section class="button-demo">  
  35. <h3>slide-left</h3>  
  36. <button class="ladda-button" data-color="blue" data-style="slide-left">Submit</button>  
  37. </section>  
  38. <section class="button-demo">  
  39. <h3>slide-right</h3>  
  40. <button class="ladda-button" data-color="blue" data-style="slide-right">Submit</button>  
  41. </section>  
  42. <section class="button-demo">  
  43. <h3>slide-up</h3>  
  44. <button class="ladda-button" data-color="blue" data-style="slide-up">Submit</button>  
  45. </section>  
  46. <section class="button-demo">  
  47. <h3>slide-down</h3>  
  48. <button class="ladda-button" data-color="blue" data-style="slide-down">Submit</button>  
  49. </section>  
  50. <h3 id="progress">Built-in progress bar</h3>  
  51. <section class="progress-demo">  
  52. <h3>expand-right</h3>  
  53. <button class="ladda-button" data-color="purple" data-style="expand-right">Submit</button>  
  54. </section>  
  55. <section class="progress-demo">  
  56. <h3>contract</h3>  
  57. <button class="ladda-button" data-color="purple" data-style="contract">Submit</button>  
  58. </section>  
  59. <h3 id="sizes">Sizes</h3>  
  60. <section class="progress-demo">  
  61. <h3>Extra Small</h3>  
  62. <button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xs">Submit</button>  
  63. </section>  
  64. <section class="progress-demo">  
  65. <h3>Small</h3>  
  66. <button class="ladda-button" data-color="mint" data-style="expand-right" data-size="s">Submit</button>  
  67. </section>  
  68. <section class="progress-demo">  
  69. <h3>Large</h3>  
  70. <button class="ladda-button" data-color="mint" data-style="expand-right" data-size="l">Submit</button>  
  71. </section>  
  72. <section class="progress-demo">  
  73. <h3>Extra Large</h3>  
  74. <button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">Submit</button>  
  75. </section>  
  76. </article>  
  77. <script src="dist/spin.min.js"></script>   
  78. <script src="dist/ladda.min.js"></script>   
  79. <script>  
  80.   
  81.             // Bind normal buttons  
  82.             Ladda.bind( '.button-demo button', { timeout: 2000 } );  
  83.   
  84.             // Bind progress buttons and simulate loading progress  
  85.             Ladda.bind( '.progress-demo button', {  
  86.                 callback: function( instance ) {  
  87.                     var progress = 0;  
  88.                     var interval = setInterval( function() {  
  89.                         progress = Math.min( progress + Math.random() * 0.1, 1 );  
  90.                         instance.setProgress( progress );  
  91.   
  92.                         if( progress === 1 ) {  
  93.                             instance.stop();  
  94.                             clearInterval( interval );  
  95.                         }  
  96.                     }, 200 );  
  97.                 }  
  98.             } );  
  99.   
  100.             // You can control loading explicitly using the JavaScript API  
  101.             // as outlined below:  
  102.   
  103.             // var l = Ladda.create( document.querySelector( 'button' ) );  
  104.             // l.start();  
  105.             // l.stop();  
  106.             // l.toggle();  
  107.             // l.isLoading();  
  108.             // l.setProgress( 0-1 );  
  109.   
  110.         </script>  

 


原文地址:http://www.freejs.net/article_biaodan_151.html