MinimalTimeline.js | Creating a Web Timeline UI for Web Easily

MinimalTimeline.js is a minimal timeline UI component for the web application. It allow us to create a beautiful timeline quickly.

AuthorLinksMade withLast update
alexprutOffice HomeJavaScriptOct 09, 2022

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>