Making a CSS timeline, with the emergence of social media, has started to become popular and can be used in other type of websites, such as blogs, portfolios, news portals, weather apps and many more. With the help of CSS & JS besides creating stunning timeline examples that can be used in your current and future projects you can also make tables, menus, sliders, loaders etc.

That’s why I decided to put together a list of some of the best CSS timelines I could find on CodePen.

An HTML timeline styled with CSS and with a bit of giggles.

Created this timeline for the company history section of www.meridianapps.com. Uses the LESS CSS framework and some jquery hover/click events.

See the Pen HTML Timeline by jtholloran (@jtholloran) on CodePen.

An advanced timeline using HTML, CSS and Javascript.

Basic yet responsive (mobile also) vertical CSS timeline.

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

Pure CSS timeline card made with Google Material Design.

Hyperloop timeline styled with pure CSS.

See the Pen Hyperloop Timeline by vysocina (@vysocina) on CodePen.

An animated CSS timeline while using jQuery scrolling.

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

Horizontal timeline made with CSS and JS for car related projects.

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

A vertical responsive timeline with fade in new events.

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

Vertical timeline scribble made with SCSS.

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

CSS only timeline for a client. Mobile styles coming soon.

Work in progress. Going to be an animated svg travel timeline.

CSS implementation of dribble sketch for training purposes.

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

An awesome timeline sequence version built with Angular and simple CSS.

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

A simple horizontal HR timeline.

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

Minimalistic horizontal timline made with jQuery and CSS.

See the Pen Horizontal Timeline by ritz078 (@ritz078) on CodePen.

Collapsable jQuery timeline with smooth transitions.

See the Pen Collapsable Timeline by barney-parker (@barney-parker) on CodePen.

Making a narrow version of the Timelinr plugin to fit on a mobile screen.

See the Pen Narrow Vertical Timeline by tylerberry (@tylerberry) on CodePen.

CSS animated horizontal timeline with a bit of jQuery.

See the Pen Horizontal CSS Timeline by Naasa21 (@Naasa21) on CodePen.

A gaussian blur photo effect applied on a vertical timeline built with jQuery.

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

A timeline with fixed header using flexbox. Data is not correct or complete. Only for demo.

Building a horizontal timeline with CSS and JavaScript.

Was inspired to code up a timeline based on some Dribbble shots that I seen.

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

Based on the Dribbble shot timeline http://dribbble.com/shots/562262-Timeline.

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

How to build a responsive vertical timeline with CSS and a touch of JavaScript.

Responsive vertical timeline with collapsable details.

/li>