@drtvader
Вечный студент

Как при загрузке страницы плавно растянуть блок?

Привет!
Как сделать, что при загрузке страницы синяя полоска заполнилась до определенного места?
keyframes не подходит.

37394cdc2dfd4e10b26573dc5d8326b6.png
<div class="calendar-load">
    <div class="calendar-load__wrap">
           <div class="calendar-load__start">Start</div>
                   <div class="calendar-load__end">Debt Free</div>
                   <div class="calendar-load__today">Today</div>
          </div>
          <div class="calendar-load__bar-wrap">
                 <div class="calendar-load__bar"></div>
          </div>
          <div class="calendar-load__wrap">
                 <div class="calendar-load__start calendar-load__start--small">Jun 16, 2016</div>
                 <div class="calendar-load__end calendar-load__end--small">Jun 16, 2018</div>
          </div>
 </div>
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
@drtvader Автор вопроса
Вечный студент
.calendar-load__bar {
    width: 0px;
    height:20px;
    border-radius: 4px;
    background-color: #4db5f6;
    transition: width 2s;
}

.calendar-load__bar--animate {
    width: 100px;
}

$(document).ready(function() {
    $('.calendar-load__bar').addClass('calendar-load__bar--animate');
    $('.calendar-load__today').addClass('calendar-load__today--animate');
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы