FreeFrontend

46 CSS Timelines

February 10, 2017 | 19 Minute Read

46HTML and CSS timelines with little JavaScript. Demo and download code (*zip).

Vertical Timelines

Demo Image: Timeline
Timeline (demo image)

Timeline

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

download demo and code

See the Pen timeline by Mert Nerukuc (@knyttneve) on CodePen.

Demo Image: Hyperloop Timeline
Hyperloop Timeline (demo image)

Hyperloop Timeline

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

download demo and code

See the Pen hyperloop timeline by Jakub Bačo (@vysocina) on CodePen.

Demo Image: Vertical Timeline
Vertical Timeline (demo image)

Vertical Timeline

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

download demo and code
Demo Image: Flexbox Timeline Layout
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

download demo and code

See the Pen Flexbox Timeline Layout by Paul Barker (@paulhbarker) on CodePen.

Demo Image: Single Div Timeline
Single Div Timeline (demo image)

Single Div Timeline

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

download demo and code

See the Pen Single div timeline by Niels Voogt (@NielsVoogt) on CodePen.

Demo Image: CSS Timeline
CSS Timeline (demo image)

CSS Timeline

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

download demo and code

See the Pen CSS Timeline by Rafael Youakeem (@Youakeem) on CodePen.

Demo Image: Vertical Timeline
Vertical Timeline (demo image)

Vertical Timeline

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

download demo and code

See the Pen Timeline by Atticus Koya (@OfficialAntarctica) on CodePen.

Demo Image: Timeline
Timeline (demo image)

Timeline

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

download demo and code

See the Pen Timeline by Nomisoft (@nomisoft) on CodePen.

Demo Image: Comments & Feeadbacks & History Timeline
Comments & Feeadbacks & History Timeline (demo image)

Comments & Feeadbacks & History Timeline

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

download demo and code

See the Pen comments & feeadbacks & history timeline by Hosam Elnabawy (@hosamsam) on CodePen.

Demo Image: UI Design Morning Timeline
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

download demo and code

See the Pen [UI DESIGN] Morning timeline ! by Hưng Nguyễn (@ZeroX-DG) on CodePen.

Demo Image: Timeline
Timeline (demo image)

Timeline

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

download demo and code

See the Pen Timeline by Kelsey Santangelo (@ksantangelo) on CodePen.

Demo Image: Timeline UI
Timeline UI (demo image)

Timeline UI

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

download demo and code

See the Pen Timeline UI by Simon Reinsperger (@abisz) on CodePen.

Demo Image: Simple Responsive Timeline
Simple Responsive Timeline (demo image)

Simple Responsive Timeline

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

download demo and code

See the Pen Simple Responsive Timeline by Brady Wright (@phasethree) on CodePen.

Demo Image: Vertical Timeline
Vertical Timeline (demo image)

Vertical Timeline

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

download demo and code

See the Pen Vertical Timeline by Sava Lazic (@savalazic) on CodePen.

Demo Image: Responsive Timeline
Responsive Timeline (demo image)

Responsive Timeline

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

download demo and code

See the Pen Responsive Timeline by Arnaud Balland (@ArnaudBalland) on CodePen.

Demo Image: Vertical Timeline
Vertical Timeline (demo image)

Vertical Timeline

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

download demo and code

See the Pen YGC V2 Timeline by Yago Gonzalez (@ygc) on CodePen.

Demo Image: Pretty Timeline
Pretty Timeline (demo image)

Pretty Timeline

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

download demo and code

See the Pen Pretty Timeline by Evan Wieland (@EvanWieland) on CodePen.

Demo Image: CSS Timeline
CSS Timeline (demo image)

CSS Timeline

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

download demo and code

See the Pen CSS Timeline v2 by Tristan White (@triss90) on CodePen.

Demo Image: Timeline
Timeline (demo image)

Timeline

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

download demo and code

See the Pen Timeline by radhika prajapati (@rprajapatii) on CodePen.

Demo Image: Vertical Timeline With CSS
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

download demo and code
Demo Image: Timeline
Timeline (demo image)

Timeline

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

download demo and code

See the Pen Timeline by Bruno Rodrigues (@itbruno) on CodePen.

Demo Image: Collapsable Timeline
Collapsable Timeline (demo image)

Collapsable Timeline

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

download demo and code

See the Pen Collapsable timeline by Barney Parker (@barney-parker) on CodePen.

Demo Image: CSS3 Timeline
CSS3 Timeline (demo image)

CSS3 Timeline

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

download demo and code

See the Pen CSS3 Timeline by Krishna Babu (@krishnab) on CodePen.

Demo Image: Animated SVG Travel Timeline
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

download demo and code

See the Pen Animated SVG Travel Timeline by Vince Brown (@Vince_Brown) on CodePen.

Demo Image: Vertical Timeline
Vertical Timeline (demo image)

Vertical Timeline

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

download demo and code

See the Pen CSS Timeline by Darcy Voutt (@darcyvoutt) on CodePen.

Demo Image: Timeline Animation
Timeline Animation (demo image)

Timeline Animation

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

download demo and code

See the Pen Timeline animation by Chris Wright (@chriswrightdesign) on CodePen.

Demo Image: Narrow Vertical Timeline
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

download demo and code

See the Pen Narrow Vertical Timelinr by Tyler Berry (@tylerberry) on CodePen.

Demo Image: Timeline For A Portfolio
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

download demo and code

See the Pen Timeline for a Portfolio by Andrew R McHugh (@armthethinker) on CodePen.

Demo Image: Responsive Vertical Timeline
Responsive Vertical Timeline (demo image)

Responsive Vertical Timeline

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

download demo and code

See the Pen Responsive Vertical Timeline by Ratko Solaja (@Ratko_Solaja) on CodePen.

Demo Image: Vertical Timeline
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

download demo and code

See the Pen Vertical Timeline by CodyHouse (@codyhouse) on CodePen.

Demo Image: Timeline Scribble
Timeline Scribble (demo image)

Timeline Scribble

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

download demo and code

See the Pen Timeline scribble by Michaela (@Fischaela) on CodePen.

Demo Image: Vertical Timeline
Vertical Timeline (demo image)

Vertical Timeline

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

download demo and code

See the Pen Timeline by Ross McNeil (@rossmcneil) on CodePen.

Demo Image: CSS Timeline
CSS Timeline (demo image)

CSS Timeline

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

download demo and code

See the Pen CSS Timeline by Nils Wittler (@NilsWe) on CodePen.

Demo Image: CSS3 Timeline
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

download demo and code

See the Pen CSS3 Timeline by Peiwen Lu (@P233) on CodePen.

Horizontal Timelines

Demo Image: 4 Panel Timeline CSS
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

download demo and code

See the Pen 4 Panel Timeline CSS by Jeff Glenn (@jeffglenn) on CodePen.

Demo Image: Timeline Sequence V1
Timeline Sequence V1 (demo image)

Timeline Sequence V1

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

download demo and code

See the Pen Timeline Sequence V1 by Youssef (@xander1820) on CodePen.

Demo Image: Horizontal Timeline Mockup
Horizontal Timeline Mockup (demo image)

Horizontal Timeline Mockup

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

download demo and code

See the Pen Horizontal timeline mockup v2 by Xin YAO (@TriVector) on CodePen.

Demo Image: HR Timeline
HR Timeline (demo image)

HR Timeline

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

download demo and code

See the Pen HR Timeline by Youri (@yourinium) on CodePen.

Demo Image: Horizontal Timeline Inspired By Codyhouse
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

download demo and code
Demo Image: Horizontal Timeline
Horizontal Timeline (demo image)

Horizontal Timeline

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

download demo and code

See the Pen horizontal timeline by Ritesh Kumar (@ritz078) on CodePen.

Demo Image: Horizontal Timeline
Horizontal Timeline (demo image)

Horizontal Timeline

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

download demo and code

See the Pen qdxKMo by Alberto (@Naasa21) on CodePen.

Demo Image: Timeline
Timeline (demo image)

Timeline

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

download demo and code

See the Pen Timeline by Abhi Sharma (@abhisharma2) on CodePen.

Demo Image: Animated Circle Timeline
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

download demo and code

See the Pen Animated circle timeline by Jen Huang (@jen-huang) on CodePen.

Demo Image: Horizontal Timeline
Horizontal Timeline (demo image)

Horizontal Timeline

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

download demo and code

See the Pen DcHup by Elton Mesquita (@eltonmesquita) on CodePen.

Demo Image: Horizontal Timeline
Horizontal Timeline (demo image)

Horizontal Timeline

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

download demo and code

See the Pen Timeline by Clint Brown (@clintabrown) on CodePen.

Demo Image: CSS3 Horizontal Timeline
CSS3 Horizontal Timeline (demo image)

CSS3 Horizontal Timeline

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

download demo and code

See the Pen CSS3 Horizontal Timeline by Peiwen Lu (@P233) on CodePen.