Анимированная иконка загрузки на CSS3

  • Tutorial


Идея взята у Dan Eden (demo), я лишь немного доработал способ.

Суть



В качестве круга используем обычный блок с рамкой. Рамка может иметь любой цвет и ширину (в этом и уникальность способа, что блок абсолютно независим от фона и прочих вещей). Рамку мы скругляем на 100% и делаем верхнюю её часть прозрачной. В этот самый пробел мы и вставляем треугольник (хак с нулевым размером блока и границей), используя наши любимые псевдо-элементы. Ну и под конец анимируем блок для имитации эффекта загрузки.

Разметка:

<span class="spinner"></span>​


CSS:


.spinner {
    display: block;
    width: 35px;
    height: 35px;
    margin: 80px 150px;
    position: relative;

    border: 2px solid rgba(0,0,0,0.5);
    border-top-color: transparent;
    border-radius: 100%;

    animation: spin 1s infinite linear;
 }
 
.spinner:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -6px;
    left: 3px;
    
    border: 6px solid transparent;
    border-bottom-color: rgba(0,0,0,0.5);
    
    transform: rotate(45deg);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}​


Не забывайте указывать префиксы для браузеров!

Способ работает во всех современных браузерах (IE<=9, давай до свидания!)

Демо на jsfiddle
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 99
  • +19
    Спасибо — клёво!

    А так — jsfiddle.net/Nesvet/vyAw8/ —? :-)
  • 0
    Круто, но gif картинка не меньше будет занимать? :)
    • +2
      Gif вам такой прозрачности не даст + добавит один запрос.
      • +3
        PNG & data/uri в CSS, не?
        • 0
          Анимировать PNG-шку? А какой выигрыш?
          • 0
            Не анимировать PNG-шку, а можно использовать APNG :)
            • +1
              Изменить цвет/размер/скорость и направление анимации в данном случае в разы проще. Так что сравнение с графикой неуместно.
              • 0
                APNG по прежнему не работает в webkit без костылей
          • +6
            1. 1 запрос который скешируется и на серверной стороне и на клиентской и больше не будет подгружаться, потому и на сервере он отдастся из памяти и на клиентской стороне тоже из памяти будет получатся
            2. под линуксом у меня нагрузка ~10% от одной такой стрелочки, как вы думаете какая нагрузка от гифки? ;-)
            3. «такая прозрачность» — имеются в виду размытые границы стрелки?
        • –12
          не работает в Google Chrome 20.0.1132.47 m Win7 (на минуточку, самый популярный браузер в мире ;)
          временами мелькает стрелка, когда есть задержка с отрисовкой

          в ФФ 12.0 работает

          • +1
            У меня эта же версия стоит, Win7 x64, всё прекрасно работает.
            • –1
              у меня 32bit, запускал даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f
              • 0
                За слово sppiner, addblock+ может вырезать. Если бы оно просто не работало, были бы бордеры хотя бы.
                • –1
                  «даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f»
                  адблока нет

                  и чуть выше — «временами мелькает стрелка, когда есть задержка с отрисовкой»

                  просто из-за постоянной перерисовки самой стрелки не видно.
                  • +2
                    Но вы понимаете, что проблема только у вас у одного персонально, а не у всего мира? Это ведь о чём-то говорит.
                    • 0
                      Не только у него. У меня ровно то же наблюдается (Chrome 20.0.1132.47 m, Win7×64). Плагинов нет, инкогнито-режим. Редко-редко моргает стрелочка, и всё.
                      • 0
                        А вы пробовали вручную запустить пример, без использования jsfiddle? Т.е. html-код скопировать в новый файл и запустить.
                      • 0
                        У вас блок вообще не отображается?
                        • 0
                          Тоже самая сборка и виндоус, всё отображается. Попробовал на нетбуке — отображается только часть кружочка, и стрелка мелькает. Сначала стал дулмать на аппаратное ускорение, но оно оказалось отключено и там и там. Не уж то зависит от видеокарты?
                          • 0
                            Вполне может не работать из за видео карты, точно такое встречалось с поддержкой transform3d, может и просто с transform тоже есть подобные проблемы.

                            Причем даже modernizr пока не умеет определять поддержку на уровне железа.
                            • 0
                              А вообще какие-то противоречия есть. Флаг для обработки цсс анимации на gpu в хроме есть, но он отключен. Но друго варианта, почему так происходит у меня нет.
                            • +1
                              А знаете, похоже, Вы правы. Проверил на другой машине с нормальным видео — всё крутится. А у меня древняя интеловская графика G31…

                              Получается, Хром перекладывает CSS-анимацию на видеокарту, а уж справилась та или нет — это его не волнует. Это плохо:(
                              • 0
                                Ага. На нетбуке в другом браузере были видны фризы, когда в хроме анииация была плавная хотя и не всё отображалось.
                                • 0
                                  В хроме есть about:flags, попробуйте там включать/отключать параметры:

                                  «Переопределение списка программного рендеринга»,
                                  «Обработка всех страниц с помощью графического процессора»,
                                  «Enable accelerated CSS animations»,
                                  «Ускоренная работа фильтров SVG и CSS с помощью графического процессора»,
                                  «Отключение вертикальной синхронизации графического процессора»

                                  Если после каких-то изменений заработает отпишитесь тут пожалуйста :)
                                  • 0
                                    Я вчера это пробовал, по умолчанию у меня это почти всё отключено. Ни каких изменений, увы. На большом всё включал, и так и так хорошо, на нетбуке и так и так плохо. ТакИе дела :(
                                    • 0
                                      У меня то же самое, к сожалению.
                              • 0
                                Как вариант попробуйте остановить анимацию (закомментируйте строки с анимацией), если блок появится значит проблема в анимации и, возможно, в рендеринге.
                            • 0
                              У вас сам блок вообще не отображается. Проблема явно на вашей стороне.
                    • +7
                      В Опере скролл скачет. Впрочем, там часто что-нибудь скачет. :)
                      • +3
                        Странно, у меня не скачет, последняя 12 версия.
                        • +2
                          вам пишут 2 человека, что метод не работает как заявлено («работает во всех современных браузерах» ), а вы талдычите, что у вас работает.

                          с таким подходом ваш метод никому не нужен.
                          • 0
                            Прежде чем обвинять кого-то в криворукости, выровняйте свои руки ©
                            • +7
                              Вам человек багрепорт шлёт, а вы его минусуете…
                              • 0
                                Я никого не минусую из принципов. А баг есть только у этого человека, и не известно, что у человека ещё этого есть. )
                                • +2
                                  Видите баг? А он есть.
                                  • +2
                                    Он есть не только у этого человека.
                                    • +1
                                      Но это не говорит о том, что автор виноват в чём-то. Раз на одинаковых системах, сборка хрома что-то работает по разному, значит стоит писать в баг терекер хрома, а не то, с каким фэ пишет IntenT.
                                      • 0
                                        Возможно, они включили аппаратное ускорение, а оно может глючить не некоторых компах, почему и выключено.
                                        • 0
                                          Без аппаратного ускорения, какой-то глюк с появляющейся/исчезающей полосой прокрутки.
                                  • 0
                                    пусть хоть видео запишет, что ли
                              • 0
                                Opera Next последняя сборка, Ubuntu x64 — скачет однако! И объект вращения во время того, как скачет болтается влево-вправо.
                                Chromium хорошо работает.
                                В FF 14.0 как-будто центр тяжести потерялся, немного заносит.
                                Так что не всё так хорошо, как было задумано.
                                • 0
                                  Я чуть ниже ответил что есть такая проблема, всё зависит от конкретной реализации анимаций в браузере.
                                  • +2
                                    Странно, что в Opera на разных платформах (у вас же Win?) ведёт себя по разному, движок ведь один должен быть.
                                    А так в топку такие эффекты, что они даже в одном браузере работают по разному.
                                    Разработчикам, что ли скинуть ссылку на пример, пусть думают?
                                    • 0
                                      Разработчики знают об этом, но такие вещи реализуют «чтобы было». Понятное дело что в серьёзных проектах где нужна полная кроссбраузерность такими приёмами не похвастаешься :)
                                      • 0
                                        Открыл пример с jsfiddle — там Opera нормально работает (сглаживание самое приятное), а в FF всё-таки что-то с центрированием.
                                        Что именно по сравнению с оригиналом вы меняли? Видимо, это в вашем примере исправлено, я сначала первый смотрел.
                                        • 0
                                          Размеры, цвета рамки.
                                          • 0
                                            Вот более стабильную версию сделал. Opera OK. FF — тоже центр тяжести на месте.
                                            http://codepen.io/pen/8668/1
                                            • +2
                                              Обёртка — не ок, надо без неё сообразить.
                                              • 0
                                                Да, с обёрткой в разы проще становится.
                                      • 0
                                        Самое верное решение )
                                        • 0
                                          Угу, css animation себя ведёт вообще стрёмно. Делал открытку давно, тоже хотел заюзать, потом решил что пусть лучше будет transition и откопал свою старую тестовую либу.

                                          artlark.ru/demos/8march/
                                          • 0
                                            Интересный пример, что за либа?
                                            • 0
                                              Ну это я громко сказал. ) Просто набор кусков кода, всякие эксперименты, всё на коленке писал, фор фан так сказать. Потом появились идеи, и собрал во что-то рабочее.
                                              Ещё вот такие делал:
                                              artlark.ru/demos/bubbles/
                                              artlark.ru/demos/maya/

                                              У меня на гитхабе все примеры, если интересно. Код конечно соответствует коленочному )
                                              github.com/SerDIDG
                                          • 0
                                            Аппаратное ускорение Оперы включено? У меня в примере автора с ним — стрелка моргает, без него — все нормально. Как видимо и у хрома выше.
                                            • 0
                                              Включено, но проблема не в том, всё достаточно просто можно профиксить.
                                              #comment_4958943
                                    • 0
                                      В фф тоже скачет и везде должен скакать, так как вращается бокс, и в зависимости положения его углов увеличивается ширина\высота парента. Позиционирование спасёт мир.
                                      • 0
                                        В хроме не скачет, кстати, да.
                                        • 0
                                          Я пытался играться с transform-origin в фф, но не получилось нормировать. Есть вариант пихать в ещё один блок и анимировать его, тогда должно плавно идти. Насколько я понял анимация так отображается из-за псевдо-элемента который увеличивает высоту блока на несколько пикселей, только вот фф их считает, а хром игнорирует и вращает блок 35 на 35.
                                          • 0
                                            С анимацией всё в порядке то, просто если сузить окно, горизонтальный скролбар начинает пульсировать. Связано с тем, что когда бокс вращается, и собственно его диагональ больше чем его сторона, увеличивается и родительский блок. В принципе это проведение есть правильным. А вот хром как-то странно себе ведёт с этим, да. Но я не знаю что из этого хуже, и во что серьёзное может выльется на более сложных задачах.
                                            • 0
                                              С Win смотрите? Я у себя проверил на всех браузерах — нигде скроллбар не изменялся.
                                              • 0
                                                Угу, вы сузьте окно пока не появится скроллбар.
                                                • 0
                                                  Понял о чём речь, меняется только горизонтальный скроллбар, а я вертикальный проверял.
                                        • +1
                                          Делал подобную штуку — помог overflow.
                                      • +4
                                        Чето вы рано IE9 хороните-то — IE10 еще даже не вышел толком.
                                        • 0
                                          Разные браузеры по-разному отображают такие вещи. У FF хорошо заметны полоски на углах скруглённой части (не видите — прибавьте толщины линиям), у оперы как всегда косяки с позиционированием, но полосок на углах нет, в других браузерах скорее всего другие косяки (проверять лень), потому пока лучше всё же что-то другое 8(

                                          А вообще скругления и поворот — это то что сейчас сильно различается в разных браузерах, хотя все вроде бы поддерживают
                                          • 0
                                            «Опера 12» на «Маке» — скачет скролл, в последних ФФ, Сафари и Хроме на той же платформе — всё ок.
                                          • 0
                                            Центрировать через отступ – моветон. Ведь все современные браузеры умеют использовать Flexible Box Model. Довольно просто: jsfiddle.net/Grawl/D92Vp/
                                            А для старых браузеров можно подкладывать старый хак “centering in the unknown”, который также присутствует в примере выше.
                                            • 0
                                              Тогда уж префиксы ставьте или Chrome 20.0.1132.47 m не включен в список «всех современных браузеров»?
                                              • 0
                                                Зачем писать префиксы, если подключен -prefix-free.js?
                                              • 0
                                                Opera Next последняя — верхний левый угол
                                                • 0
                                                  Приношу извинения. Что-то пошло не так и сохранился fiddle без обратной поддержки. Вот здесь всё работает: codepen.io/Grawl/pen/2/3
                                                  • 0
                                                    Да, работает. Спасибо за пример, всегда центрировал с помощью margin и position.
                                                    • 0
                                                      Рад помочь. Сам не так давно (меньше года назад) узнал про центрирование призраком, а гибкая блочная модель — это вообще песня, советую изучить.
                                                • +1
                                                  Увы, в опере не пашет. Да и похоже что вы старый стандарт используете, в рекомендации сейчас flex и inline-flex: w3c, mozilla
                                                  • 0
                                                    Так Opera и не умеет Flex-Box. Ни по старому, ни по новому синтаксису. И Webkit этого тоже не умеет: ни в Safari 6, ни в WebKit.app ревизии 121866. Потому и использую старый стандарт, который есть в браузерах.
                                                    А вообще, в Opera сработало бы, если бы не ошибка: дал ссылку на первую версию фидла, а не нужную (не хватает как раз того хака). Вот, работает везде: codepen.io/Grawl/pen/2/1 (даже в IE центрирует, правда, не анимирует :) ).
                                                    • 0
                                                      Мне кажется что лучше не использовать стандарт от которого отказался w3c, даже если он поддерживается в каких-либо браузерах. Пройдёт год-два и всё что было свёрстано на этих свойствах просто полетит.
                                                      Кстати, в примере из-за 100% высоты появился скролл.
                                                      • 0
                                                        Вспомним синтаксис цветовых растяжек: WebKit до сих пор поддерживает старый синтаксис, а стандарт уже в статусе рекомендации. А так как блочная модель — важнее их, Я уверен: поддержка display: box будет продолжительной.
                                                        Прокрутка появилась из-за отступа у body. Я включил CSS Reset и теперь прокрутки нет: codepen.io/Grawl/pen/2/3
                                                  • 0
                                                    Если уж совсем надо отцентировать то есть вот такой вариант: jsfiddle.net/CyberAP/FkjXg/595/
                                                    • +1
                                                      > display: table;
                                                      nooooooooooooooo.com
                                                      • +1
                                                        Что вы плохого увидели в display: table?
                                                        • 0
                                                          Это неправильно же.
                                                          • 0
                                                            Так объясните в чём? Использовать устаревшие свойства тоже неправильно.
                                                            • 0
                                                              display: table; — это ничем не лучше, чем вёрстка таблицами. Не тот инструмент не для той задачи. Логически, display: table; — для тех случаев, когда нужно построить таблицу из блоков с информацией, но использовать табличную разметку нельзя.
                                                              Насчёт устаревших свойств — выше: #comment_4961043
                                                              • 0
                                                                Пока что это один из лучших вариантов на текущей спецификации и поддержке, если мы используем не абсолютно спозиционированный блок.
                                                                Можно конечно сделать на inline-block, но мы лишимся :before и придётся свойства для текста заново перезаписывать (word-spacing).
                                                                • 0
                                                                  > Пока что это один из лучших вариантов на текущей спецификации и поддержке
                                                                  зависит от множества условий. Я ни разу не использовал CSS-таблицы, например.
                                                                  > но мы лишимся ::before
                                                                  но ведь есть ещё и ::after. но — да, аргумент. на перегруженных графикой проектах нужен каждый псевдо-блок.
                                                                  > и придётся свойства для текста заново перезаписывать (word-spacing).
                                                                  это ещё зачем? псевдо-блоки ничего не портят же, какой ещё word-spacing?
                                                                  • 0
                                                                    css-tricks.com/centering-in-the-unknown/ — 2 способ, чтобы пиксель в пискель вошло надо убирать пробел между inline-block'ами.
                                                                    • 0
                                                                      Когда нужно pixel-perfect — можно и восстановить word-spacing, ведь таких проектов мало. чаще совершенно не важны эти пара точек.
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                • 0
                                                                  а где оно оправдано? не работает в IE<8, а для остальных есть отличные альтернативы.

                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.