Стилизация кнопок загрузки при помощи CSS3 и HTML5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<link rel="stylesheet" type="text/css" href="/css/component.css"> <script type='text/javascript' src="/js/classie.js"></script> <script type='text/javascript' src="/js/modernizr.custom.js"></script> <script type='text/javascript' src="/js/progressButton.js"></script> <script> [].slice.call(document.querySelectorAll('button.progress-button')).forEach(function (bttn) { new ProgressButton(bttn, { callback: function (instance) { var progress = 0, interval = setInterval(function () { progress = Math.min(progress + Math.random() * 0.1, 1); instance._setProgress(progress); if (progress === 1) { instance._stop(1); clearInterval(interval); } }, 200); } }); }); </script> |
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<div class="wrapper"> <section> <h2>fill horizontal</h2><button class="progress-button" data-horizontal="" data-style="fill">Отправить</button> </section> <section> <h2>fill vertical</h2><button class="progress-button" data-style="fill" data-vertical="">Отправить</button> </section> <section> <h2>shrink horizontal</h2><button class="progress-button" data-horizontal="" data-style="shrink">Отправить</button> </section> <section> <h2>shrink vertical</h2><button class="progress-button" data-style="shrink" data-vertical="">Отправить</button> </section> </div> <div class="wrapper"> <section> <h2>rotate-angle-bottom<br> perspective</h2><button class="progress-button" data-horizontal="" data-perspective="" data-style="rotate-angle-bottom">Отправить</button> </section> <section> <h2>rotate-angle-top<br> perspective</h2><button class="progress-button" data-horizontal="" data-perspective="" data-style="rotate-angle-top">Отправить</button> </section> <section> <h2>rotate-angle-left<br> perspective</h2><button class="progress-button" data-perspective="" data-style="rotate-angle-left" data-vertical="">Отправить</button> </section> <section> <h2>rotate-angle-right<br> perspective</h2><button class="progress-button" data-perspective="" data-style="rotate-angle-right" data-vertical="">Отправить</button> </section> </div> <div class="wrapper"> <section> <h2>rotate-side-down<br> perspective</h2><button class="progress-button" data-horizontal="" data-perspective="" data-style="rotate-side-down">Отправить</button> </section> <section> <h2>rotate-side-up<br> perspective</h2><button class="progress-button" data-horizontal="" data-perspective="" data-style="rotate-side-up">Отправить</button> </section> <section> <h2>rotate-side-left<br> perspective</h2><button class="progress-button" data-perspective="" data-style="rotate-side-left" data-vertical="">Отправить</button> </section> <section> <h2>rotate-side-right<br> perspective</h2><button class="progress-button" data-perspective="" data-style="rotate-side-right" data-vertical="">Отправить</button> </section> </div> <div class="wrapper"> <section> <h2>rotate-back<br> perspective</h2><button class="progress-button" data-horizontal="" data-perspective="" data-style="rotate-back">Отправить</button> </section> <section> <h2>flip-open<br> perspective</h2><button class="progress-button" data-horizontal="" data-perspective="" data-style="flip-open">Отправить</button> </section> <section> <h2>slide-down<br> horizontal</h2><button class="progress-button" data-horizontal="" data-style="slide-down">Отправить</button> </section> <section> <h2>move-up<br> horizontal</h2><button class="progress-button" data-horizontal="" data-style="move-up">Отправить</button> </section> </div> <div class="wrapper"> <section> <h2>top-line<br> horizontal</h2><button class="progress-button" data-horizontal="" data-style="top-line">Отправить</button> </section> <section> <h2>lateral-lines<br> vertical</h2><button class="progress-button" data-style="lateral-lines" data-vertical="">Отправить</button> </section> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
