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

[Nesvet]

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

А так — jsfiddle.net/Nesvet/vyAw8/ —? :-)

[CyberAP]

Хороший вариант :)

[crea7or]

Круто, но gif картинка не меньше будет занимать? :)

[CyberAP]

Gif вам такой прозрачности не даст + добавит один запрос.

[ZimM]

PNG & data/uri в CSS, не?

[CyberAP]

Анимировать PNG-шку? А какой выигрыш?

[Vidog]

Не анимировать PNG-шку, а можно использовать APNG :)

[kolyuchii]

Изменить цвет/размер/скорость и направление анимации в данном случае в разы проще. Так что сравнение с графикой неуместно.

[de_arnst]

APNG по прежнему не работает в webkit без костылей

[youlose]

1. 1 запрос который скешируется и на серверной стороне и на клиентской и больше не будет подгружаться, потому и на сервере он отдастся из памяти и на клиентской стороне тоже из памяти будет получатся
2. под линуксом у меня нагрузка ~10% от одной такой стрелочки, как вы думаете какая нагрузка от гифки? ;-)
3. «такая прозрачность» — имеются в виду размытые границы стрелки?

[IntenT]

не работает в Google Chrome 20.0.1132.47 m Win7 (на минуточку, самый популярный браузер в мире ;)
временами мелькает стрелка, когда есть задержка с отрисовкой

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

[CyberAP]

У меня эта же версия стоит, Win7 x64, всё прекрасно работает.

[IntenT]

у меня 32bit, запускал даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f

[SerDIDG]

За слово sppiner, addblock+ может вырезать. Если бы оно просто не работало, были бы бордеры хотя бы.

[IntenT]

«даже с отключенными плагинами — результат — gyazo.com/53eb9a6c6d1a90ac2ac294820d5ef86f»
адблока нет

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

просто из-за постоянной перерисовки самой стрелки не видно.

[SerDIDG]

Но вы понимаете, что проблема только у вас у одного персонально, а не у всего мира? Это ведь о чём-то говорит.

[david_mz]

Не только у него. У меня ровно то же наблюдается (Chrome 20.0.1132.47 m, Win7×64). Плагинов нет, инкогнито-режим. Редко-редко моргает стрелочка, и всё.

[nsinreal]

А вы пробовали вручную запустить пример, без использования jsfiddle? Т.е. html-код скопировать в новый файл и запустить.

[spmbt]

Это и фиддл умеет: fiddle.jshell.net/vyAw8/371/show/light/

[CyberAP]

У вас блок вообще не отображается?

[SerDIDG]

Тоже самая сборка и виндоус, всё отображается. Попробовал на нетбуке — отображается только часть кружочка, и стрелка мелькает. Сначала стал дулмать на аппаратное ускорение, но оно оказалось отключено и там и там. Не уж то зависит от видеокарты?

[Operatino]

Вполне может не работать из за видео карты, точно такое встречалось с поддержкой transform3d, может и просто с transform тоже есть подобные проблемы.

Причем даже modernizr пока не умеет определять поддержку на уровне железа.

[SerDIDG]

А вообще какие-то противоречия есть. Флаг для обработки цсс анимации на gpu в хроме есть, но он отключен. Но друго варианта, почему так происходит у меня нет.

[david_mz]

А знаете, похоже, Вы правы. Проверил на другой машине с нормальным видео — всё крутится. А у меня древняя интеловская графика G31…

Получается, Хром перекладывает CSS-анимацию на видеокарту, а уж справилась та или нет — это его не волнует. Это плохо:(

[SerDIDG]

Ага. На нетбуке в другом браузере были видны фризы, когда в хроме анииация была плавная хотя и не всё отображалось.

[CyberAP]

В хроме есть about:flags, попробуйте там включать/отключать параметры:

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

Если после каких-то изменений заработает отпишитесь тут пожалуйста :)

[SerDIDG]

Я вчера это пробовал, по умолчанию у меня это почти всё отключено. Ни каких изменений, увы. На большом всё включал, и так и так хорошо, на нетбуке и так и так плохо. ТакИе дела :(

[david_mz]

У меня то же самое, к сожалению.

[CyberAP]

Как вариант попробуйте остановить анимацию (закомментируйте строки с анимацией), если блок появится значит проблема в анимации и, возможно, в рендеринге.

[CyberAP]

У вас сам блок вообще не отображается. Проблема явно на вашей стороне.

[DeMx]

В Опере скролл скачет. Впрочем, там часто что-нибудь скачет. :)

[CyberAP]

Странно, у меня не скачет, последняя 12 версия.

[IntenT]

вам пишут 2 человека, что метод не работает как заявлено («работает во всех современных браузерах» ), а вы талдычите, что у вас работает.

с таким подходом ваш метод никому не нужен.

[SerDIDG]

Прежде чем обвинять кого-то в криворукости, выровняйте свои руки ©

[SleepingLion]

Вам человек багрепорт шлёт, а вы его минусуете…

[SerDIDG]

Я никого не минусую из принципов. А баг есть только у этого человека, и не известно, что у человека ещё этого есть. )

[Squier]

Видите баг? А он есть.

[TiGR]

Он есть не только у этого человека.

[SerDIDG]

Но это не говорит о том, что автор виноват в чём-то. Раз на одинаковых системах, сборка хрома что-то работает по разному, значит стоит писать в баг терекер хрома, а не то, с каким фэ пишет IntenT.

[TiGR]

Без аппаратного ускорения, какой-то глюк с появляющейся/исчезающей полосой прокрутки.

[nazarpc]

Opera Next последняя сборка, Ubuntu x64 — скачет однако! И объект вращения во время того, как скачет болтается влево-вправо.
Chromium хорошо работает.
В FF 14.0 как-будто центр тяжести потерялся, немного заносит.
Так что не всё так хорошо, как было задумано.

[CyberAP]

Я чуть ниже ответил что есть такая проблема, всё зависит от конкретной реализации анимаций в браузере.

[nazarpc]

Странно, что в Opera на разных платформах (у вас же Win?) ведёт себя по разному, движок ведь один должен быть.
А так в топку такие эффекты, что они даже в одном браузере работают по разному.
Разработчикам, что ли скинуть ссылку на пример, пусть думают?

[CyberAP]

Разработчики знают об этом, но такие вещи реализуют «чтобы было». Понятное дело что в серьёзных проектах где нужна полная кроссбраузерность такими приёмами не похвастаешься :)

[nazarpc]

Открыл пример с jsfiddle — там Opera нормально работает (сглаживание самое приятное), а в FF всё-таки что-то с центрированием.
Что именно по сравнению с оригиналом вы меняли? Видимо, это в вашем примере исправлено, я сначала первый смотрел.

[CyberAP]

Размеры, цвета рамки.

[nazarpc]

Вот более стабильную версию сделал. Opera OK. FF — тоже центр тяжести на месте.
http://codepen.io/pen/8668/1

[CyberAP]

Да, с обёрткой в разы проще становится.

[SerDIDG]

Самое верное решение )

[SerDIDG]

Угу, css animation себя ведёт вообще стрёмно. Делал открытку давно, тоже хотел заюзать, потом решил что пусть лучше будет transition и откопал свою старую тестовую либу.

artlark.ru/demos/8march/

[nazarpc]

Интересный пример, что за либа?

[SerDIDG]

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

У меня на гитхабе все примеры, если интересно. Код конечно соответствует коленочному )
github.com/SerDIDG

[dasm32]

Аппаратное ускорение Оперы включено? У меня в примере автора с ним — стрелка моргает, без него — все нормально. Как видимо и у хрома выше.

[nazarpc]

Включено, но проблема не в том, всё достаточно просто можно профиксить.
#comment_4958943

[SerDIDG]

В фф тоже скачет и везде должен скакать, так как вращается бокс, и в зависимости положения его углов увеличивается ширина\высота парента. Позиционирование спасёт мир.

[SerDIDG]

В хроме не скачет, кстати, да.

[CyberAP]

Я пытался играться с transform-origin в фф, но не получилось нормировать. Есть вариант пихать в ещё один блок и анимировать его, тогда должно плавно идти. Насколько я понял анимация так отображается из-за псевдо-элемента который увеличивает высоту блока на несколько пикселей, только вот фф их считает, а хром игнорирует и вращает блок 35 на 35.

[SerDIDG]

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

[CyberAP]

С Win смотрите? Я у себя проверил на всех браузерах — нигде скроллбар не изменялся.

[SerDIDG]

Угу, вы сузьте окно пока не появится скроллбар.

[CyberAP]

Понял о чём речь, меняется только горизонтальный скроллбар, а я вертикальный проверял.

[nazarpc]

Делал подобную штуку — помог overflow.

[Evengard]

Чето вы рано IE9 хороните-то — IE10 еще даже не вышел толком.

[Denai]

Разные браузеры по-разному отображают такие вещи. У FF хорошо заметны полоски на углах скруглённой части (не видите — прибавьте толщины линиям), у оперы как всегда косяки с позиционированием, но полосок на углах нет, в других браузерах скорее всего другие косяки (проверять лень), потому пока лучше всё же что-то другое 8(

А вообще скругления и поворот — это то что сейчас сильно различается в разных браузерах, хотя все вроде бы поддерживают

[bolk]

«Опера 12» на «Маке» — скачет скролл, в последних ФФ, Сафари и Хроме на той же платформе — всё ок.

[bolk]

Нет.

[vitvad]

если дописать overflow:hidden; на body перестанет скакать

[nazarpc]

#comment_4958943

[SergeiStartsev]

Тогда уж префиксы ставьте или Chrome 20.0.1132.47 m не включен в список «всех современных браузеров»?

[nazarpc]

Opera Next последняя — верхний левый угол

[nazarpc]

Да, работает. Спасибо за пример, всегда центрировал с помощью margin и position.

[CyberAP]

Увы, в опере не пашет. Да и похоже что вы старый стандарт используете, в рекомендации сейчас flex и inline-flex: w3c, mozilla

[CyberAP]

Мне кажется что лучше не использовать стандарт от которого отказался w3c, даже если он поддерживается в каких-либо браузерах. Пройдёт год-два и всё что было свёрстано на этих свойствах просто полетит.
Кстати, в примере из-за 100% высоты появился скролл.

[CyberAP]

Если уж совсем надо отцентировать то есть вот такой вариант: jsfiddle.net/CyberAP/FkjXg/595/

[CyberAP]

Что вы плохого увидели в display: table?

[CyberAP]

Так объясните в чём? Использовать устаревшие свойства тоже неправильно.

[CyberAP]

Пока что это один из лучших вариантов на текущей спецификации и поддержке, если мы используем не абсолютно спозиционированный блок.
Можно конечно сделать на inline-block, но мы лишимся :before и придётся свойства для текста заново перезаписывать (word-spacing).

[CyberAP]

css-tricks.com/centering-in-the-unknown/ — 2 способ, чтобы пиксель в пискель вошло надо убирать пробел между inline-block'ами.

[CyberAP]

Да, но псевдо-элементы тоже нужны, как, к примеру, вот в этом варианте: #comment_4958553

[CyberAP]

Вот это хороший вариант, спасибо.