Кнопки с индикаторами загрузки и прогресс барами через плагин Ladda
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<link rel="stylesheet" type="text/css" href="/css/ladda.min.css"> <script type='text/javascript' src="/js/spin.min.js"></script> <script type='text/javascript' src="/js/ladda.min.js"></script> <script> // Bind normal buttons Ladda.bind('.button-demo button', { timeout: 2000 }); // Bind progress buttons and simulate loading progress Ladda.bind('.progress-demo button', { callback: function (instance) { var progress = 0; var interval = setInterval(function () { progress = Math.min(progress + Math.random() * 0.1, 1); instance.setProgress(progress); if (progress === 1) { instance.stop(); clearInterval(interval); } }, 200); } }); // You can control loading explicitly using the JavaScript API // as outlined below: // var l = Ladda.create( document.querySelector( 'button' ) ); // l.start(); // l.stop(); // l.toggle(); // l.isLoading(); // l.setProgress( 0-1 ); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<section class="button-demo"> <button class="ladda-button" data-color="green" data-style="expand-left">Submit</button> </section> <section class="progress-demo"> <button class="ladda-button" data-color="purple" data-style="expand-right">Submit</button> </section> <section class="progress-demo"> <button class="ladda-button" data-color="purple" data-style="contract">Submit</button> </section> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
