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. // Bind normal buttons
81. Ladda.bind( '.button-demo button', { timeout: 2000 } );
82. // Bind progress buttons and simulate loading progress
83. Ladda.bind( '.progress-demo button', {
84. callback: function( instance ) {
85. var progress = 0;
86. var interval = setInterval( function() {
87. progress = Math.min( progress + Math.random() * 0.1, 1 );
88. instance.setProgress( progress );
89. if( progress === 1 ) {
90. instance.stop();
91. clearInterval( interval );
92. }
93. }, 200 );
94. }
95. } );
96. // You can control loading explicitly using the JavaScript API
97. // as outlined below:
98. // var l = Ladda.create( document.querySelector( 'button' ) );
99. // l.start();
100. // l.stop();
101. // l.toggle();
102. // l.isLoading();
103. // l.setProgress( 0-1 );
104. </script>

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