10 Best Timeline Components In jQuery And Pure JS/CSS (2025 Update)
The timeline is a useful visual tool that allows you to tell a story, show history, personal events and any other event related information on the page.
It generates a horizontal or vertical line that shows the time and the order in which events have happened to enhance comprehension.
In this page, you will find out the 10 best open source timeline plugins/components/libraries written in jQuery, native JavaScript, and/or pure CSS. Enjoy!
Originally Published May 13 2019, updated Jan 20 2025
Table of contents:
jQuery Timeline Plugins:
Easy Horizontal Timeline Generator With jQuery - Timeline.js
Timeline.js is a jQuery timeline generator which helps you render horizontal, scrolling, responsive bar & point/line style timelines (with event details) from dynamic data arrays/objects.
Dynamic Animated Timeline Slider With jQuery - Roadmap
A timeline slider plugin with jQuery that dynamically displays events in a responsive, scrollable, horizontal/vertical slider with a subtle fadeIn animation.
Responsive Horizontal/Vertical Timeline Plugin For jQuery
A responsive, flexible, animated, scrollable and high-performance jQuery (Vanilla JavaScript) timeline plugin that automatically switches between horizontal and vertical layouts depending on the current screen size.
Horizontal Scrollable Timeline Plugin - jTimeline
A tiny, responsive, SEO-friendly jQuery timeline plugin that generates a horizontal scrollable timeline from an HTML unordered list.
Progressive Enhancement Timeline Plugin - jQuery Timestack
A responsive, flexible, progressive enhancement timeline plugin used to display your project events in chronological order.
Vanilla JS Timeline Libraries:
Parallel Timelines Chart With JavaScript And SVG
A JavaScript & SVG based charting library to create a Gantt Chart style segmented timelines for representing the state of time-series over time.
Responsive Horizontal/Vertical Timeline In Vanilla JavaScript – timeline.js
A vanilla JavaScript plugin to render a responsive, horizontal/vertical timeline component from plain HTML.
Responsive Interactive Timeline In Vanilla JavaScript – Simple Timeline
A simple, responsive, interactive timeline implemented in pure JavaScript.
Dynamic Vertical Timelines Made Easy With VerticalTimeline.js
A lightweight, dynamic, responsive, and vertical timeline for displaying a timeline of historical events, product releases, or project milestones in a linear fashion.
Timesheet Style Timeline JavaScript Library – Timesheet.js
A JavaScript library to visualize your data and events in a timesheet-style timeline chart.
Bonus: Pure CSS Timeline Components:
Responsive Vertical Timeline In Pure CSS
A simple, plain, responsive, vertical timeline built with CSS and HTML unordered list.
Responsive Vertical Timeline In CSS/SASS
Yet another responsive, nice-looking, and vertical timeline UI built on top of pure CSS/SASS.
Conclusion:
Looking for more jQuery plugins or JavaScript libraries to create awesome timelines on the web & mobile? Check out the jQuery Timeline and JS/CSS Timeline sections.
