Крутые прогрессбары на чистом CSS
+1
Крутые прогрессбары на чистом CSS - хотел сначала поставить к нам на монитор сервера, но у нас уже есть индикатор прогрессбара в голосованиях от Elegant Division, поэтому оставил как есть, а эти сохраню для вас. HTML5 тег progress оказывается невозможно анимировать через transition, поэтому везде прогрессбары построены на дивах. Тем не менее ещё выкладываю годное руководство по тегу progress.

Руководство и кастомизация progress html5

Stylish CSS3 progress bars from red-team-design

Set above to: 25% / 50% / 75% / 100%

Set above to: 25% / 50% / 75% / 100%

Set above to: 25% / 50% / 75% / 100%




Внимание! Данная статья была написана более полугода назад, актуальность материала и состояние жизни ссылок не гарантируется! Воспользуйтесь дополнительными параметрами для поиска необходимого вам контента! Приносим свои извинения...
Russian Federation  Комментарий от Автора #1, добавлен: 9 июня 2014, 16:59 [2] [Q] [#]
0
И ещё важная заметка оказывается jquery .animate не совместим с transition

для стартовой анимации можно юзать:

$(function() {                        
                        $(".ed_progress > span").each(function() {
                                $(this)
                                        .data("origWidth", $(this).width())
                                        .width(0)
                                        .animate({
                                                width: $(this).data("origWidth")
                                        }, 1200);
                        });
});

Оставить комментарий / Добавление ссылок в комментариях разрешено