50+ Amazing HTML and CSS Timelines

Timelines are another type of infographics uses where visual representation of information and events that happen over time. A timeline is the presentation of a chronological sequence of events along a drawn line that enables a viewer to understand temporal relationships quickly. Sometimes it is also referred to chronology that is in tabular, year-by-year paragraphs, or other form.

Infographics and historical projects will often use timelines to express important dates or events. Additionally timelines can refer to the interface element found recently in web and mobile applications. Examples can include Facebook’s newest design, or a Twitter iOS client like Tweetbot. So I’ve put together some really lovely examples of timelines in action. Many of these are based around a specific graphical theme and you can pick up on some fun design techniques.

  • Vertical Timelines

 Advanced Timeline

Demo Image: Advanced TimeLine

Advanced timeline: HTML / CSS / JavaScript
Made by MO7AMED
June 6, 2017

Timeline With Fixed Header Using Flexbox

Demo Image: Timeline With Fixed Header Using Flexbox

HTML and CSS timeline with fixed header using flexbox.
Made by Matys
May 29, 2017


Project Timeline

Demo Image: Project Timeline

Project timeline in HTML and CSS.
Made by Russell Bishop
February 19, 2017


Timeline

Demo Image: Timeline

HTML, CSS and JavaScript timeline.
Made by Mert Nerukuc
February 6, 2017


Hyperloop Timeline

Demo Image: Hyperloop Timeline

Hyperloop timeline with HTML and CSS.
Made by Jakub Bačo
January 29, 2017


Vertical Timeline

Demo Image: Vertical Timeline

CSS vertical timeline with time intervals.
Made by Andres
January 25, 2017


Flexbox Timeline Layout

Demo Image: Flexbox Timeline Layout

Column-based flexbox timeline layout. The goal is to have clean, semantic HTML while creating a (somewhat complex) timeline-looking layout.
Made by Paul Barker
January 16, 2017


Single Div Timeline

Demo Image: Single Div Timeline

Single div timeline in HTML and CSS.
Made by Niels Voogt
December 28, 2016


CSS Timeline

Demo Image: CSS Timeline

HTML and CSS timeline.
Made by Rafael Youakeem
December 26, 2016


Vertical Timeline

Demo Image: Vertical Timeline

HTML and CSS timeline.
Made by Atticus Koya
December 22, 2016


Timeline

Demo Image: Timeline

CSS timeline example with vertical and horizontal lines created with pseudo-elements.
Made by Nomisoft
December 7, 2016


Comments & Feeadbacks & History Timeline

Demo Image: Comments & Feeadbacks & History Timeline

Double side comment timeline tweenmax.
Made by Hosam Elnabawy
November 28, 2016


UI Design Morning Timeline

Demo Image: UI Design Morning Timeline

Morning timeline with HTML and CSS.
Made by Hưng Nguyễn
September 17, 2016


Timeline

Demo Image: Timeline

Timeline with HTML and CSS.
Made by Kelsey Santangelo
November 14, 2016


Timeline UI

Demo Image: Timeline UI

CSS implementation of dribble sketch for training purposes original design.
Made by Simon Reinsperger
September 13, 2016


Simple Responsive Timeline

Demo Image: Simple Responsive Timeline

Simple responsive timeline in HTML and CSS.
Made by Brady Wright
September 8, 2016


Vertical Timeline

Demo Image: Vertical Timeline

Vertical timeline with HTML, CSS and JavaScript.
Made by Sava Lazic
September 4, 2016


Responsive Timeline

Demo Image: Responsive Timeline

Responsive Timeline with HTML, CSS and JavaScript.
Made by Arnaud Balland
August 25, 2016


Vertical Timeline

Demo Image: Vertical Timeline

Timeline with HTML and CSS.
Made by Yago Gonzalez
August 23, 2016


Pretty Timeline

Demo Image: Pretty Timeline

HTML and CSS pretty timeline.
Made by Evan Wieland
July 14, 2016


CSS Timeline

Demo Image: CSS Timeline

CSS timeline with HTML and CSS.
Made by Tristan White
July 10, 2016


Timeline

Demo Image: Timeline

Timeline with HTML, CSS and JavaScript.
Made by radhika prajapati
July 6, 2016


Vertical Timeline With CSS

Demo Image: Vertical Timeline With CSS

Building a vertical timeline with CSS and a touch of JavaScript.
Made by Envato Tuts+
May 24, 2016


Timeline

Demo Image: Timeline

Timeline for a personal project with HTML and CSS.
Made by Bruno Rodrigues
April 3, 2016


Collapsable Timeline

Demo Image: Collapsable Timeline

Collapsable timeline with HTML, CSS and JavaScript.
Made by Barney Parker
November 26, 2015


CSS3 Timeline

Demo Image: CSS3 Timeline

Fully responsive mobile first CSS timeline.
Made by Krishna Babu
November 24, 2015


Animated SVG Travel Timeline

Demo Image: Animated SVG Travel Timeline

Animated travel timeline with HTML, CSS and SVG.
Made by Vince Brown
July 29, 2015


Demo Image: Vertical Timeline

Pure CSS vertical timeline.
Made by Darcy Voutt
March 11, 2015


Timeline Animation

Demo Image: Timeline Animation

Just messing around with a simple animated timeline.
Made by Chris Wright
February 12, 2015


Narrow Vertical Timeline

Demo Image: Narrow Vertical Timeline

Making a narrow version of the timeline plugin to fit on a mobile screen.
Made by Tyler Berry
February 3, 2015


Timeline For A Portfolio

Demo Image: Timeline For A Portfolio

A timeline inspired by http://kohlhofer.com/, built for a portfolio page.
Made by Andrew R McHugh
February 1, 2015


Responsive Vertical Timeline

Demo Image: Responsive Vertical Timeline

HTML and CSS responsive vertical timeline.
Made by Ratko Solaja
September 26, 2014


Vertical Timeline

Demo Image: Vertical Timeline

An easy to customize, responsive timeline. Used some CSS3 tricks and a bit of jQuery to create some bounce animations that affect desktop users only, while on mobile the structure is more minimal.
Made by CodyHouse
June 12, 2014


Timeline Scribble

Demo Image: Timeline Scribble

HTML and CSS timeline scribble.
Made by Michaela
April 20, 2014


Vertical Timeline

Demo Image: Vertical Timeline

HTML and CSS timeline.
Made by Ross McNeil
January 7, 2014


CSS Timeline

Demo Image: CSS Timeline

Fully responsive CSS timeline.
Made by Nils Wittler
September 19, 2013


CSS3 Timeline

Demo Image: CSS3 Timeline

Please set the $vertical variable to false to see the horizontal version.
Made by Peiwen Lu
May 19, 2013

  • Horizontal Timelines

Horizontal Timeline

Demo Image: Horizontal Timeline

Horizontal timeline with CSS and JavaScript.
Made by Envato Tuts+
April 27, 2017


Horizontal Timeline

Demo Image: Horizontal Timeline

HTML and CSS timeline with slick.js slider.
Made by cenda
April 10, 2017


4 Panel Timeline CSS

Demo Image: 4 Panel Timeline CSS

CSS only timeline for a client. Mobile styles coming soon.
Made by Jeff Glenn
December 22, 2016


Timeline Sequence V1

Demo Image: Timeline Sequence V1

Timeline with HTML, CSS and JavaScript.
Made by Youssef
June 8, 2016


Horizontal Timeline Mockup

Demo Image: Horizontal Timeline Mockup

Horizontal timeline with HTML, CSS and JavaScript.
Made by Xin YAO
February 18, 2016


HR Timeline

Demo Image: HR Timeline

HTML and CSS timeline.
Made by Youri
February 17, 2016


Horizontal Timeline Inspired By Codyhouse

Demo Image: Horizontal Timeline Inspired By Codyhouse

This is a horizontal timeline that will be used with a dynamic set of no more than maybe 5 dates.
Made by Adam Kimmerer
February 9, 2016


Horizontal Timeline

Demo Image: Horizontal Timeline

Horizontal timeline with HTML, CSS and JavaScript.
Made by Ritesh Kumar
December 24, 2015


Horizontal Timeline

Demo Image: Horizontal Timeline

Horizontal timeline with HTML, CSS and JavaScript.
Made by Alberto
July 6, 2015


Timeline

Demo Image: Timeline

Simple timeline abstraction with HTML and CSS.
Made by Abhi Sharma
December 23, 2014


Animated Circle Timeline

Demo Image: Animated Circle Timeline

Timeline with animated items that appear on hover of the corresponding time slot.
Made by Jen Huang
December 11, 2014


Horizontal Timeline

Demo Image: Horizontal Timeline

HTML, CSS and JavaScript horizontal timeline.
Made by Elton Mesquita
August 29, 2014


Horizontal Timeline

Demo Image: Horizontal Timeline

Timeline with HTML and CSS.
Made by Clint Brown
September 30, 2013


CSS3 Horizontal Timeline

Demo Image: CSS3 Horizontal Timeline

HTML and CSS3 horizontal timeline.
Made by Peiwen Lu
May 17, 2013

You may also like...

Read previous post:
Here Are the 10 Graphic Design Trends to Watch in 2018

Trends come and go. The graphic design world is always evolving. Some design trends fade away for months, others stay...

Close