51 CSS Timelines

July 12, 2017

51 HTML and CSS timelines with little JavaScript: vertical and horizontal. Demo and download code (*zip).

Update of February 2017 collection. 5 new items.

Table Of Contents

  1. Vertical Timelines
  2. Horizontal Timelines

Vertical Timelines

Demo Image: Advanced TimeLine
Demo Image: Advanced Timeline

Advanced Timeline

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

Demo Image: Timeline With Fixed Header Using Flexbox
Demo GIF: Timeline With Fixed Header Using Flexbox

Timeline With Fixed Header Using Flexbox

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

Demo Image: Project Timeline
Demo Image: Project Timeline

Project Timeline

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

Demo Image: Timeline
Demo Image: Timeline

Timeline

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

Demo Image: Hyperloop Timeline
Demo Image: Hyperloop Timeline

Hyperloop Timeline

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

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

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

Demo Image: Flexbox Timeline Layout
Demo Image: Flexbox Timeline Layout

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

Demo Image: Single Div Timeline
Demo Image: Single Div Timeline

Single Div Timeline

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

Demo Image: CSS Timeline
Demo Image: CSS Timeline

CSS Timeline

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

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

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

Demo Image: Timeline
Demo Image: Timeline

Timeline

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

Demo Image: Comments & Feeadbacks & History Timeline
Demo Image: Comments & Feeadbacks & History Timeline

Comments & Feeadbacks & History Timeline

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

Demo Image: UI Design Morning Timeline
Demo Image: UI Design Morning Timeline

UI Design Morning Timeline

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

Demo Image: Timeline
Demo Image: Timeline

Timeline

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

Demo Image: Timeline UI
Demo Image: Timeline UI

Timeline UI

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

Demo Image: Simple Responsive Timeline
Demo Image: Simple Responsive Timeline

Simple Responsive Timeline

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

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

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

Demo Image: Responsive Timeline
Demo Image: Responsive Timeline

Responsive Timeline

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

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

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

Demo Image: Pretty Timeline
Demo Image: Pretty Timeline

Pretty Timeline

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

Demo Image: CSS Timeline
Demo Image: CSS Timeline

CSS Timeline

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

Demo Image: Timeline
Demo Image: Timeline

Timeline

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

Demo Image: Vertical Timeline With CSS
Demo Image: Vertical Timeline With CSS

Vertical Timeline With CSS

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

Demo Image: Timeline
Demo Image: Timeline

Timeline

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

Demo Image: Collapsable Timeline
Demo Image: Collapsable Timeline

Collapsable Timeline

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

Demo Image: CSS3 Timeline
Demo Image: CSS3 Timeline

CSS3 Timeline

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

Demo Image: Animated SVG Travel Timeline
Demo Image: Animated SVG Travel Timeline

Animated SVG Travel Timeline

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

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

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

Demo Image: Timeline Animation
Demo Image: Timeline Animation

Timeline Animation

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

Demo Image: Narrow Vertical Timeline
Demo Image: Narrow Vertical Timeline

Narrow Vertical Timeline

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

Demo Image: Timeline For A Portfolio
Demo Image: Timeline For A Portfolio

Timeline For A Portfolio

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

Demo Image: Responsive Vertical Timeline
Demo Image: Responsive Vertical Timeline

Responsive Vertical Timeline

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

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

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

Demo Image: Timeline Scribble
Demo Image: Timeline Scribble

Timeline Scribble

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

Demo Image: Vertical Timeline
Demo Image: Vertical Timeline

Vertical Timeline

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

Demo Image: CSS Timeline
Demo Image: CSS Timeline

CSS Timeline

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

Demo Image: CSS3 Timeline
Demo Image: CSS3 Timeline

CSS3 Timeline

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

Horizontal Timelines

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

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

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

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

Demo Image: 4 Panel Timeline CSS
Demo Image: 4 Panel Timeline CSS

4 Panel Timeline CSS

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

Demo Image: Timeline Sequence V1
Demo Image: Timeline Sequence V1

Timeline Sequence V1

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

Demo Image: Horizontal Timeline Mockup
Demo Image: Horizontal Timeline Mockup

Horizontal Timeline Mockup

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

Demo Image: HR Timeline
Demo Image: HR Timeline

HR Timeline

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

Demo Image: Horizontal Timeline Inspired By Codyhouse
Demo Image: Horizontal Timeline Inspired By Codyhouse

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

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

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

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

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

Demo Image: Timeline
Demo Image: Timeline

Timeline

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

Demo Image: Animated Circle Timeline
Demo Image: Animated Circle Timeline

Animated Circle Timeline

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

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

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

Demo Image: Horizontal Timeline
Demo Image: Horizontal Timeline

Horizontal Timeline

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

Demo Image: CSS3 Horizontal Timeline
Demo Image: CSS3 Horizontal Timeline

CSS3 Horizontal Timeline

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

FreeFrontend © 2016 - 2017

Back to top