Что это такое?
SpinKit — это набор индикаторов загрузки, анимированных на чистом CSS. Это файл стилей, который вы подключаете к веб-проекту и получаете плавные индикаторы загрузки без JavaScript и картинок.
SpinKit — это набор индикаторов загрузки, анимированных на чистом CSS. Это файл стилей, который вы подключаете к веб-проекту и получаете плавные индикаторы загрузки без JavaScript и картинок.Это CSS-файл, который нужно подключить, или просто код, чтобы скопировать и вставить?И то и другое. Можно подключить spinkit.css или spinkit.min.css, а можно скопировать и вставить только код нужного спиннера — спиннеры ни от чего не зависят друг от друга, у них нет общих классов и общих анимаций.
И то и другое. Можно подключить spinkit.css или spinkit.min.css, а можно скопировать и вставить только код нужного спиннера — спиннеры ни от чего не зависят друг от друга, у них нет общих классов и общих анимаций.Как добавить спиннер на свою страницу?Установите пакет через npm или bower (или просто вставьте CSS напрямую), подключите spinkit.min.css, затем скопируйте и вставьте HTML-фрагмент нужного спиннера из файла examples.html.
Установите пакет через npm или bower (или просто вставьте CSS напрямую), подключите spinkit.min.css, затем скопируйте и вставьте HTML-фрагмент нужного спиннера из файла examples.html.Для работы нужен JavaScript или jQuery?Нет. Спиннеры — это обычный CSS, анимированный только свойствами transform и opacity, именно поэтому движение получается плавным. JavaScript пригодится лишь для того, чтобы определить поддержку браузером и показать запасной вариант.
Нет. Спиннеры — это обычный CSS, анимированный только свойствами transform и opacity, именно поэтому движение получается плавным. JavaScript пригодится лишь для того, чтобы определить поддержку браузером и показать запасной вариант.Спиннеры будут работать во всех браузерах?Почти везде: CSS-анимации с ключевыми кадрами поддерживают около 96,5% браузеров в мире, а CSS-переменные — около 91,8%. Для старых браузеров можно убрать CSS-переменные или проверить поддержку анимаций через Modernizr и подставить GIF в качестве запасного варианта.
Почти везде: CSS-анимации с ключевыми кадрами поддерживают около 96,5% браузеров в мире, а CSS-переменные — около 91,8%. Для старых браузеров можно убрать CSS-переменные или проверить поддержку анимаций через Modernizr и подставить GIF в качестве запасного варианта.Сколько видов спиннеров есть в SpinKit?Двенадцать: Plane, Chase, Bounce, Wave, Pulse, Flow, Swing, Circle, Circle Fade, Grid, Fold и Wander. Демо-страница показывает их все в действии.
Двенадцать: Plane, Chase, Bounce, Wave, Pulse, Flow, Swing, Circle, Circle Fade, Grid, Fold и Wander. Демо-страница показывает их все в действии.Как изменить размер и цвет спиннера?Переопределите CSS-переменные: --sk-size задаёт ширину и высоту спиннера, --sk-color — его цвет. По умолчанию спиннеры имеют размер 40px и цвет фона #333.
Переопределите CSS-переменные: --sk-size задаёт ширину и высоту спиннера, --sk-color — его цвет. По умолчанию спиннеры имеют размер 40px и цвет фона #333.Как разместить спиннер по центру страницы?Добавьте элементу спиннера служебный класс sk-center — он задаёт margin со значением auto.
Добавьте элементу спиннера служебный класс sk-center — он задаёт margin со значением auto.What are similar projects?anime, nprogress, skrollr, snabbdom, animate.css, iCSS, mdb-ui-kit, material-components-web
anime, nprogress, skrollr, snabbdom, animate.css, iCSS, mdb-ui-kit, material-components-webWhich topics is it in?css-animations, loading, lightweight, ui-components, animation, css, html, ui, web-development, npm, frontend, library
css-animations, loading, lightweight, ui-components, animation, css, html, ui, web-development, npm, frontend, library