Как сверстать такую штуку

[DjTarik]

Имеется вот такой элемент управления:

1. Картинка над полукругом можем изменяться

2. Заполнение черным цветом происходит:

* по окружности (внешний элемент)

* сверху вниз (внутренний)

Вопрос:

Как сделать плавное изменение цвета по окружности (скажем, за 3 секунды)?

Буду рад любым советам, способам и т.д. Хоть скриптами, хоть CSS, хоть как...

Спсибо.

[Быколай]

gif

или svg

либо canvas

это типа прогрессбар будет?

[Great Rash]

raphael.js - будет наилучшим выбором

[wwt]

если это просто картинка статус загрузки то самое простое и верное наверное gif'кой сделать. А вот если это прогрессбар то как советовали выше raphael.js либо нативно canvas+js.

[Great Rash]

Вообще рафаэль тоже нативный

[wwt]

Вообще рафаэль тоже нативный

Я имел ввиду чистый js, а не использование дополнительных библиотек.

native переводится как родной )) А в js нет свойств и методов рафайёля, это уже пользовательские методы и свойства ). Как то так.

[Radiocity]

Видится четыре слоя друг над другом и анимация с помощью jquery

А так как jquery лепится почти везде, то и raphael подключать не придется.

PS Дизайнер - извращенец

PPS С jquery не придется мудрить с реализацией показа реального состояния процесса, реализовав его через json (как то так)

Edited October 31, 2012 by Radiocity

[DjTarik]

gif

или svg

либо canvas

это типа прогрессбар будет?

Да, это фигня показывает время, через которое переключиться слайдер.

Гиф не подойдет, т.к. время клиент может сам настраивать. С SVG пока не знаком - остаются скрипты)

raphael.js - будет наилучшим выбором

Спасибо, пойду посмотрю, что это за штука...

Видится четыре слоя друг над другом и анимация с помощью jquery

А так как jquery лепится почти везде, то и raphael подключать не придется.

PS Дизайнер - извращенец

PPS С jquery не придется мудрить с реализацией показа реального состояния процесса, реализовав его через json (как то так)

Вот мне тоже интересно - как это сделать на чистом JS, без библиотек и canvas? Ajax тоже отсутствует.

Пока даже логику не смог нормальную придумать)

[Radiocity]

Нет ajax, значит отслеживать процесс не сможете (если это не статус наполнения формы данными).. Делайте, как советовал wwt, gif анимацию.

Edited October 31, 2012 by Radiocity

[sigma77]

DjTarik,

http://raphaeljs.com/polar-clock.html

Это рафаель

[SelenIT]

У меня тупейшим алгоритмом (как в далеком детстве на бейсике) получилось так. Вот так, наверное, чуть умнее и продвинутее.

[DjTarik]

DjTarik,

http://raphaeljs.com/polar-clock.html

Это рафаель

Круто... Спасибо за наводку)

У меня тупейшим алгоритмом (как в далеком детстве на бейсике) получилось так. Вот так, наверное, чуть умнее и продвинутее.

Да ты ваще маньяк) На всё у тебя найдется решение. Спасибо!

А я что-то про канвас в последнюю очередь подумал)