Как сделать прогресс-блок в CSS?

Question

[garyk5]

Здравствуйте.

Задача: сделать набирающийся прогресс-блок при загрузке странице.

Подробнее: есть небольшой блочок синего цвета и текст белого цвета. Нужно что бы при загрузке страницы этот блок динамично набирался (как прогресс-бар) слева - направо - красным цветом --- и полностью его закрывал.

Знания: знаю как использовать transition при hover. Но здесь не совсем понимаю, как сделать, что бы блок был сразу синим и при загрузке сам наполнялся красным, с нужной скоростью до конца. И оставался в конце красным.

Натолкните пожалуйста в нужное русло.

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/8fx9xznm/

Comments

[garyk5]

Посидел, пробовал адаптировать ваше решение под свою структуру. Не работает анимация: https://jsfiddle.net/r800y3ub/33/

[Сергей delphinpro]

garyk5: https://jsfiddle.net/r800y3ub/35/

[garyk5]

Сергей: сначало было затруднение в том, что в вашем примере синтаксис SCSS. Переделал в обычный CSS. Здесь теперь мой вариант работает: https://jsfiddle.net/knebbzub/12/ . Но на локальном сервере не хочет.

Скрипт JS вставляю как:

- ставил его и после body и в конце, и прямо возле блока price - не срабатывает.

[garyk5]

Скрипт JS вставляю как: <скрипт type="text/javascript">document.querySelector('.img-service .price').classList.add('fill');скрипт>

[Сергей delphinpro]

garyk5: Что ж вы все так с препроцессорами не дружите? =)

вот на css https://jsfiddle.net/r800y3ub/38/

скрипт нужно вставлять после блока или в конце страницы (перед закрывающим body)

[garyk5]

Ааааааа!!!! Получилось!!! Спасибо, о Великий Frontend-гуру :) P.S: до препроцессоров ещё пока не дошла очередь )

Answer 2

[Алексей Уколов]

В css никак нельзя получить скорость загрузки страницы. Единственное решение - сделать это при помощи javascript, но и оно будет далеким от идеала: вам нужно поставить какие-то знаковые точки загрузки страницы, назначить им вес и увеличивать индикатор, когда эти точки будут достигаться. Это всё ручная работа, автоматизировать этот процесс невозможно.