<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>
.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');
});
Простой
