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.
CSS Timeline For Giggles
An HTML timeline styled with CSS and with a bit of giggles.
See the Pen CSS Timeline For Giggles by alanhouser (@alanhouser) on CodePen.
HTML Timeline
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.
Advanced TimeLine : HTML / CSS / JavaScript
An advanced timeline using HTML, CSS and Javascript.
See the Pen Advanced TimeLine : HTML / CSS / JavaScript by mo7hamed (@mo7hamed) on CodePen.
Simple Responsive Timeline
Basic yet responsive (mobile also) vertical CSS timeline.
See the Pen Simple Responsive Timeline by phasethree (@phasethree) on CodePen.
Pure CSS Timeline Card
Pure CSS timeline card made with Google Material Design.
See the Pen Pure CSS Timeline Card by AjayRawatCodepen (@AjayRawatCodepen) on CodePen.
Hyperloop Timeline
Hyperloop timeline styled with pure CSS.
See the Pen Hyperloop Timeline by vysocina (@vysocina) on CodePen.
Timeline
An animated CSS timeline while using jQuery scrolling.
See the Pen Timeline by rprajapatii (@rprajapatii) on CodePen.
CSS Timeline
Horizontal timeline made with CSS and JS for car related projects.
See the Pen CSS Timeline by cenda (@cenda) on CodePen.
Responsive Timeline
A vertical responsive timeline with fade in new events.
See the Pen Responsive Timeline by ArnaudBalland (@ArnaudBalland) on CodePen.
Timeline Scribble
Vertical timeline scribble made with SCSS.
See the Pen Timeline Scribble by Fischaela (@Fischaela) on CodePen.
4 Panel Timeline CSS
CSS only timeline for a client. Mobile styles coming soon.
See the Pen 4 Panel Timeline CSS by jeffglenn (@jeffglenn) on CodePen.
Animated SVG Travel Timeline
Work in progress. Going to be an animated svg travel timeline.
See the Pen Animated SVG Travel Timeline by Vince_Brown (@Vince_Brown) on CodePen.
Timeline UI
CSS implementation of dribble sketch for training purposes.
See the Pen Timeline UI by abisz (@abisz) on CodePen.
Timeline Sequence V1
An awesome timeline sequence version built with Angular and simple CSS.
See the Pen Timeline Sequence V1 by xander1820 (@xander1820) on CodePen.
HR Timeline
A simple horizontal HR timeline.
See the Pen HR Timeline by yourinium (@yourinium) on CodePen.
Horizontal Timeline
Minimalistic horizontal timline made with jQuery and CSS.
See the Pen Horizontal Timeline by ritz078 (@ritz078) on CodePen.
Collapsable Timeline
Collapsable jQuery timeline with smooth transitions.
See the Pen Collapsable Timeline by barney-parker (@barney-parker) on CodePen.
Narrow Vertical Timeline
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.
Horizontal CSS Timeline
CSS animated horizontal timeline with a bit of jQuery.
See the Pen Horizontal CSS Timeline by Naasa21 (@Naasa21) on CodePen.
timeline
A gaussian blur photo effect applied on a vertical timeline built with jQuery.
See the Pen timeline by knyttneve (@knyttneve) on CodePen.
Bitcoin Timeline With Fixed Header Using Flexbox
A timeline with fixed header using flexbox. Data is not correct or complete. Only for demo.
See the Pen Bitcoin Timeline With Fixed Header Using Flexbox by mathiesjanssen (@mathiesjanssen) on CodePen.
Building a Horizontal Timeline With CSS and JavaScript
Building a horizontal timeline with CSS and JavaScript.
See the Pen Building a Horizontal Timeline With CSS and JavaScript by tutsplus (@tutsplus) on CodePen.
CSS Timeline
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.
Timeline
Based on the Dribbble shot timeline http://dribbble.com/shots/562262-Timeline.
See the Pen Timeline by clintabrown (@clintabrown) on CodePen.
Building a Vertical Timeline With CSS & a Touch of JavaScript
How to build a responsive vertical timeline with CSS and a touch of JavaScript.
See the Pen Building a Vertical Timeline With CSS & a Touch of JavaScript by tutsplus (@tutsplus) on CodePen.
[UI DESIGN] Morning Timeline !
Responsive vertical timeline with collapsable details.
![[UI DESIGN] Morning Timeline !](https://cdn.freebiesupply.com/blog/13-07-2018/morning-timeline-f2.png)
See the Pen [UI DESIGN] Morning Timeline ! by ZeroX-DG (@ZeroX-DG) on CodePen.
Responsive Timeline
/li>
See the Pen Responsive Timeline by myasonik (@myasonik) on CodePen.
