MinimalTimeline.js is a minimal timeline UI component for the web application. It allow us to create a beautiful timeline quickly.
How to use it?
1.Run from your console/termina
bower install minimal-timeline.js --save-dev
2.Create a html page to display a timeline
Here is an example code:
<div class="timeline">
<div class="legend timeline__legend clearfix">
<a class="legend__link legend__link_border_blue" href="#" data-type="event">example</a>
<a class="legend__link" href="#" data-type="big-goal">example</a>
<a class="legend__link legend__link_border_yellow" href="#" data-type="book">example</a>
</div>
<div class="timeline__content">
<div class="timeline-details">
<span class="timeline-details__head"></span>
<span class="timeline-details__tail"></span>
</div>
<div class="timeline-block clearfix" data-year="2016">
<div class="timeline-block__date hidden">2016</div>
<div class="timeline-box timeline-box_border_yellow" data-end="current" data-type="book">
<span class="timeline-box__title">
<a target="_blank" href="#example">
example
</a>
</span>
<span class="timeline-box__date">example</span>
</div>
</div>
</div>
<button class="timeline__button">more</button>
</div>
<script>
$(function () {
$('.timeline').timeline({isOneDeep: false});
});
</script>
