Пользователь
0,0
рейтинг
4 июля 2012 в 23:25

Разработка → Анимированная иконка загрузки на CSS3 tutorial

CSS*


Идея взята у 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
Станислав @CyberAP
карма
13,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (99)

  • +19
    Спасибо — клёво!

    А так — jsfiddle.net/Nesvet/vyAw8/ —? :-)
    • 0
      Хороший вариант :)
  • 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
      Аппаратное ускорение включено?
      • 0
        Нет.
    • 0
      если дописать overflow:hidden; на body перестанет скакать
    • 0
  • 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
                          Да, но псевдо-элементы тоже нужны, как, к примеру, вот в этом варианте: #comment_4958553
                          • +1
                            Я забираю их не у span.spinner, а у body. Смотри: codepen.io/Grawl/pen/3/2
                            • 0
                              Вот это хороший вариант, спасибо.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    а где оно оправдано? не работает в IE<8, а для остальных есть отличные альтернативы.

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