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

Question

[drtvader]

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

<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>

Comments

[Ivan Bogachev]

Покажите ваш пример со стилями и поясните почему вам слово keyframes не нравится.

Answer 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');
});