2 097 Мы с вами уже занимались CSS анимацией, создавали эффектные тени для текста и даже рисовали боке.
Кажется пришло время для более сложных эффектов, таких как спиннеры. И в этом нам поможет такой грандиозный проект, как , позволяющий создавать спиннеры на CSS. В Internet Explorer для их отрисовки используется VML.
Сам плагин spin.js достаточно простой и настраиваемый. Его jQuery версию можно найти на этом .
Let's rock!
И так, вот параметры, которые можно настроить в spin.js: количество линий, длина, ширина, радиус, след, скорость вращения, тень и цвет.
|
1 2 3 4 5 6 7 8 9 10 11 |
// Создаем спиннер со следующими параметрами var spinner = new Spinner({ lines: 12, // количество линий для отрисовки length: 7, // длина каждой линии width: 5, // толщина линий radius: 10, // радиус внутреннего круга color: '#000', // #rbg или #rrggbb speed: 1, // кругов в секунду trail: 100, // процент послесвечения shadow: true // отрисовка тени }).spin(document.getElementById("ajaxContentHolder")); // Положить в нод DOM "ajaxContentHolder" |
Как вы видите экземпляр спиннера можно создавать где угодно, достаточно указать элемент, где его прорисовывать. И с таким набором параметров, как радиус, скорость, размер и т.д., вы можете создавать абсолютно любые спиннеры!
spin.js является настоящим произведением искусства. Поблагодарим разработчика плагина за его работу. Спиннеры с развитием Ajax только-только набирают популярность, поэтому эта технология достаточно востребована. Удачи вам!
