x
 
Евгения
12 июля 2012

У меня проблема — в одном из блоков, пока не подгрузился контент, нужно показывать прелоадер. Я поставила гифку, но у блока меняющийся фон и в большинстве случаев прелоадер выглядит ужасно.

Как сделать крутящийся прелоадер, независящий от фона?



Больная тема! Когда я, как и вы, использовал анимированный ГИФ, я придумал подкладывать под крутилку круглую плашку нужного цвета. Выглядело лучше, чем у вас:

Потом в Фотораме мне захотелось уйти от этой блямбы, и я нарисовал ПНГ-спрайт 12-кадровой крутилки на прозрачном фоне, который анимируется скриптом.

Но и это полумера. Хочется свободно менять цвет и фон крутилки, количество лепестков и размер. Руками это делать слишком долго, а на прелоадеры, генерируемые различными онлайн-сервисами, смотреть больно.

Я решил написать свой инструмент для работы с прелоадерами. Встречайте «Крутилку»:

<script src="jquery-1.7.1.min.js"></script>
<script src="krutilka.js"></script>

<script>
  $(function(){
    $('#krutilka').krutilka();
  });
</script>

<span id="krutilka"></span>


Плагин использует СВГ. Весит КБ в сжатом виде. Рисует такую крутилку, какую пожелаете, имеет небольшое АПИ для скрытия прелоадера и изменения скорости на лету:

Выкл EDGE 3G Wi-Fi


Исходные опции «Крутилки» такие:

var options = {
  size: 32, // Ширина и высота блока с крутилкой
  petals: 15, // Сколько лепестков у крутилки
  petalWidth: 2, // Толщина лепестка
  petalLength: 8, // Длина лепестка
  petalOffset: 1, // Внутреннее поле блока с крутилкой
  time: 1000, // Время прохода круга в миллисекундах
  color: '#808080', // Цвет лепестков, можно RGBA
  background: 'none' // Фон крутилки
};

Чтобы остановить и скрыть запущенную крутилку, пишите так:

$('#krutilka').trigger('hide');

Снова показать:

$('#krutilka').trigger('show');

Если нужно изменить время прохода анимации, укажите новое значение в миллисекундах вторым параметром:

$('#krutilka').trigger('show', 1500);

В старых браузерах без СВГ пока ничего не показывается.

Крутите на здоровье:

Поиграйте с опциями в этом фиддле

P. S.
P. P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Вадим Макеев
12 июля 2012

Может быть, код моего старого SVG-спиннера поможет тебе написать лучший плагин с фолбеком в SVG-анимацию или даже без jQuery — http://people.opera.com/pepelsbey/experiments/spinner/

Евгений Олрайт
12 июля 2012

А еще есть spin.js: http://fgnass.github.com/spin.js/

Павел Шумаков
12 июля 2012

На ЦСС3:
http://habrahabr.ru/post/147154/


13 июля 2012

В качестве конкурентного преимущества, я бы посоветовал Артёму наделать разных клёвых пресетов для Крутилки. Кастомизация — это бесспорно, очень круто, но хочется использовать из коробки.

Ещё неплохо бы заложить возможность масштабирования, чтобы при изменении размера не надо было крутить отдельные настройки.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Защититься от случайного нажатия «Сдаться» 1 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 2