1. Timeline Custom Counter With Gradient Border
Author: Lauren Chilcote (letsbleachthis)
Links: Source Code / Demo
Created on: October 27, 2018
Made with: HTML, SCSS
2. Responsive Timeline Concept
A small timeline concept for Customer's life cycle or a particular contract's life cycle.
Author: Jones Joseph (jo_Geek)
Links: Source Code / Demo
Created on: September 20, 2018
Made with: HTML, CSS
Tags: timeline, history, concept, interface, responsive
3. Timeline CSS
Author: Jonathan Snook (snookca)
Links: Source Code / Demo
Created on: May 10, 2018
Made with: HTML, CSS
4. Scroll Timeline
Author: Viktor (lebedevdesigns)
Links: Source Code / Demo
Created on: February 18, 2018
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
5. CSS Timeline For Giggles
Author: Alan Houser (alanhouser)
Links: Source Code / Demo
Created on: January 24, 2018
Made with: HTML, Less
6. Vertical Left And Right Timeline
Vertical timeline going from left to right
Author: CP Lepage (cplepage)
Links: Source Code / Demo
Created on: January 23, 2018
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: timeline, bootstrap, responsive, left, right
7. CSS Timeline With Custom Properties
Author: Stas Melnikov (melnik909)
Links: Source Code / Demo
Created on: September 30, 2017
Made with: HTML, CSS
Tags: ui, css, timeline, web-design
8. Simple Responsive Timeline
Author: keith.geek (keithwyland)
Links: Source Code / Demo
Created on: September 1, 2017
Made with: HTML, SCSS
9. Responsive Slider Timeline With Swiper
A responsive slider timeline made with Swiper lib.
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: August 30, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: timeline, slider, swiper, responsive
10. Timeline Created With CSS Grid
Responsive timeline created with CSS Grid. Browsers that do not support CSS Grid will get the mobile version of the timeline.
Author: Dianna Cheng (girlgeek)
Links: Source Code / Demo
Created on: July 14, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-grid, sass, codepenchallenge, pug, cpc-dt-dd
11. Nested & Color Coded Interactive Timeline
Author: Kent Chang (kentchangdesign)
Links: Source Code / Demo
Created on: December 3, 2017
Made with: HTML, Sass, TypeScript
12. Responsive History Timeline
Author: Dejan Babić (microfront)
Links: Source Code / Demo
Created on: October 12, 2017
Made with: HTML, SCSS, JS
Tags: responsive timeline, history timeline, jquery timeline, horizontal timeline, responsive history timeline
13. PS Group Timeline 2
Author: Abhishek Raj (abhishekraj)
Links: Source Code / Demo
Created on: October 3, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
14. Advanced TimeLine : HTML / CSS / JavaScript
Author: MO7AMED EL DMRDASH (mo7hamed)
Links: Source Code / Demo
Created on: June 6, 2017
Made with: HTML, CSS, JS
15. Bitcoin Timeline With Fixed Header Using Flexbox
A timeline with fixed header using flexbox. Data is not correct or complete. Only for demo.
Author: Matys (mathiesjanssen)
Links: Source Code / Demo
Created on: February 2, 2017
Made with: HTML, SCSS, JS
Tags: timeline, sass, flexbox, sticky, bitcoin
16. Project Timeline
Author: Russell Bishop (russelllighthouse)
Links: Source Code / Demo
Created on: February 19, 2017
Made with: HTML, SCSS
17. CSS Timeline
Author: Andres (Fahrek)
Links: Source Code / Demo
Created on: January 25, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
18. Vertical Timeline CSS
Author: Andres (Fahrek)
Links: Source Code / Demo
Created on: January 25, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
19. Flexbox Timeline Layout
Column-based flexbox timeline layout. The goal is to have clean, semantic HTML while creating a (somewhat complex) timeline-looking layout.
Author: Paul Barker (paulhbarker)
Links: Source Code / Demo
Created on: January 9, 2017
Made with: HTML, SCSS
Tags: timeline, layout, flexbox
20. Single Div Timeline
Author: Niels Voogt (NielsVoogt)
Links: Source Code / Demo
Created on: December 28, 2016
Made with: HTML, SCSS
21. CSS Timeline
Author: Rafael Youakeem (Youakeem)
Links: Source Code / Demo
Created on: December 26, 2016
Made with: HTML, SCSS
22. Timeline
Author: Zed Dash (OfficialAntarctica)
Links: Source Code / Demo
Created on: October 29, 2016
Made with: HTML, SCSS
23. Timeline
Author: Zed Dash (OfficialAntarctica)
Links: Source Code / Demo
Created on: October 29, 2016
Made with: HTML, SCSS
24. Comments & Feeadbacks & History Timeline
Double side comment timeline tweenmax
Author: Hosam Elnabawy (hosamsam)
Links: Source Code / Demo
Created on: October 18, 2016
Made with: HTML, SCSS, JS
Tags: timeline, comment, multi, tweenmax
25. [UI DESIGN] Morning Timeline !
this is my first ui design =)) hope you like it !
Author: Hưng Nguyễn (ZeroX-DG)
Links: Source Code / Demo
Created on: September 10, 2016
Made with: HTML, SCSS, JS
26. Vertical Timeline
Author: Sava Lazic (savalazic)
Links: Source Code / Demo
Created on: September 4, 2016
Made with: HTML, SCSS, JS
Tags: vertical, timeline, material, animation
27. Timeline UI
CSS implementation of dribble sketch for training purposes original design: https://dribbble.com/shots/1980532-Timeline-Profile/
Author: Simon Reinsperger (abisz)
Links: Source Code / Demo
Created on: September 4, 2016
Made with: HTML, SCSS
Tags: ui, timeline, material design, ux
28. Simple Responsive Timeline
Author: Brady Wright (phasethree)
Links: Source Code / Demo
Created on: April 28, 2016
Made with: HTML, SCSS
Tags: timeline, responsive, vertical
29. Vertical Timeline
Author: Sava Lazic (savalazic)
Links: Source Code / Demo
Created on: September 4, 2016
Made with: HTML, SCSS, JS
Tags: vertical, timeline, material, animation
30. Simple Responsive Timeline
Author: Brady Wright (phasethree)
Links: Source Code / Demo
Created on: April 28, 2016
Made with: HTML, SCSS
Tags: timeline, responsive, vertical
31. YGC V2 Timeline
Author: Yago Gonzalez (ygc)
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, SCSS
32. Pretty Timeline
Inspired by Anton Aheichanka's Timeline & Profile on Dribbble. Check out the original work here: https://dribbble.com/shots/1980532-Timeline-Profile
Author: Evan Wieland (EvanWieland)
Links: Source Code / Demo
Created on: July 14, 2016
Made with: HTML, Sass
Tags: timeline, pretty
33. CSS Timeline V2
Author: Tristan White (triss90)
Links: Source Code / Demo
Created on: May 27, 2016
Made with: HTML, SCSS
34. YGC V2 Timeline
Author: Yago Gonzalez (ygc)
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, SCSS
35. Building A Vertical Timeline With CSS And A Touch Of JavaScript
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo
Created on: May 24, 2016
Made with: HTML, CSS, JS
36. CSS Timeline
Was inspired to code up a timeline based on some Dribbble shots that I seen.
Author: Darcy Voutt (darcyvoutt)
Links: Source Code / Demo
Created on: March 10, 2015
Made with: HTML, Less, JS
Tags: timeline
37. Collapsable Timeline
Author: Barney Parker (barney-parker)
Links: Source Code / Demo
Created on: November 26, 2015
Made with: HTML, CSS, JS
Tags: timeline, collapse
38. CSS3 Timeline
Fully responsive mobile first CSS Timeline.
Author: Krishna Babu (krishnab)
Links: Source Code / Demo
Created on: March 5, 2015
Made with: HTML, CSS
Tags: css timeline, timeline, history, css based timeline
39. Animated SVG Travel Timeline
Work in progress. Going to be an animated svg travel timeline Inspired by this dribble shot
Author: Vince Brown (Vince_Brown)
Links: Source Code / Demo
Created on: April 22, 2015
Made with: HTML, SCSS, JS
40. CSS Timeline
Was inspired to code up a timeline based on some Dribbble shots that I seen.
Author: Darcy Voutt (darcyvoutt)
Links: Source Code / Demo
Created on: March 10, 2015
Made with: HTML, Less, JS
Tags: timeline
41. Timeline Animation
Just messing around with a simple animated timeline
Author: Chris Wright (chriswrightdesign)
Links: Source Code / Demo
Created on: February 6, 2015
Made with: HTML, SCSS
Tags: animation, css
42. Narrow Vertical Timelinr
Making a narrow version of the Timelinr plugin to fit on a mobile screen.
Author: Tyler Berry (tylerberry)
Links: Source Code / Demo
Created on: February 3, 2015
Made with: HTML, CSS, JS
43. Timeline For A Portfolio
A timeline inspired by http://kohlhofer.com/, built for a portfolio page.
Author: Andrew R McHugh (armthethinker)
Links: Source Code / Demo
Created on: September 28, 2014
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: portfolio, timeline, bootstrap, responsive
44. Responsive Vertical Timeline
Author: Ratko Solaja (Ratko_Solaja)
Links: Source Code / Demo
Created on: September 20, 2014
Made with: HTML, CSS, JS
45. Vertical Timeline
An easy to customize, responsive timeline. We 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. Article and Download on Cody: http://codyhouse.co/gem/vertical-timeline/
Author: CodyHouse (codyhouse)
Links: Source Code / Demo
Created on: June 12, 2014
Made with: HTML, SCSS, JS
Tags: timeline, bounce, animation, jquery, flat
46. Timeline Scribble
Author: Michaela (Fischaela)
Links: Source Code / Demo
Created on: April 20, 2014
Made with: HTML, SCSS
Tags: timeline, animation, rotate, box-shadow
47. Timeline
Author: Ross McNeil (rossmcneil)
Links: Source Code / Demo
Created on: January 7, 2014
Made with: HTML, CSS
Tags: timeline
48. CSS Timeline
Fully responsive CSS Timeline. Full article with explanation: http://nilswe.com/lab/css-timeline/
Author: Nils Wittler (NilsWe)
Links: Source Code / Demo
Created on: June 27, 2013
Made with: HTML, CSS
Tags: timeline, responsive
49. CSS3 Timeline
Please set the $vertical variable to false to see the horizontal version.
Author: Peiwen Lu (P233)
Links: Source Code / Demo
Created on: May 14, 2013
Made with: HTML, Sass
50. Building A Horizontal Timeline With CSS And JavaScript
Read full tutorial by George Martsoukos on Envato Tuts+!
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo
Created on: April 25, 2017
Made with: HTML, CSS, Babel
51. Timeline
Author: cenda (cenda)
Links: Source Code / Demo
Created on: March 13, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: skodovka
52. 4 Panel Timeline CSS
CSS only timeline for a client. Mobile styles coming soon.
Author: Jeff Glenn (jeffglenn)
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, SCSS
Tags: timeline, css, panel
53. Timeline Sequence V1
Author: Youssef (xander1820)
Links: Source Code / Demo
Created on: June 3, 2016
Made with: HTML, CSS, JS
54. Horizontal Timeline Mockup V2
Author: Xin YAO (TriVector)
Links: Source Code / Demo
Created on: February 18, 2016
Made with: HTML, CSS, JS
55. HR Timeline
Author: Youri (yourinium)
Links: Source Code / Demo
Created on: February 14, 2016
Made with: HTML, CSS
56. Horizontal Timeline In CSS
This is a horizontal timeline that will be used with a dynamic set of no more than maybe 5 dates. To do: Add year to the calculation
Author: Adam Kimmerer (AdamKimmerer)
Links: Source Code / Demo
Created on: December 17, 2015
Made with: HTML, SCSS, JS
Tags: timeline, horizontal, jquery, codyhouse, dynamic
57. Horizontal Timeline
Author: Ritesh Kumar (ritz078)
Links: Source Code / Demo
Created on: December 24, 2015
Made with: HTML, CSS, JS
58. Untitled
Author: Alberto (Naasa21)
Links: Source Code / Demo
Created on: July 2, 2015
Made with: HTML, CSS, JS
59. Vertical Timeline
An easy to customize, responsive timeline. We 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. Article and Download on Cody: http://codyhouse.co/gem/vertical-timeline/
Author: CodyHouse (codyhouse)
Links: Source Code / Demo
Created on: June 12, 2014
Made with: HTML, SCSS, JS
Tags: timeline, bounce, animation, jquery, flat
60. Animated Circle Timeline
Timeline with animated items that appear on hover of the corresponding time slot
Author: Jen Huang (jen-huang)
Links: Source Code / Demo
Created on: December 11, 2014
Made with: HTML, SCSS, JS
Tags: timeline
61. Untitled
Author: Elton Mesquita (eltonmesquita)
Links: Source Code / Demo
Created on: August 27, 2014
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
62. Timeline
Based on the Dribbble shot Timeline by Gabe Abadilla - http://dribbble.com/shots/562262-Timeline
Author: Clint Brown (clintabrown)
Links: Source Code / Demo
Created on: September 28, 2013
Made with: HTML, SCSS
Tags: dribbble, css3, timeline, ui, layout
63. CSS3 Horizontal Timeline
Author: Peiwen Lu (P233)
Links: Source Code / Demo
Created on: May 17, 2013
Made with: HTML, Sass
64. Vertical Timeline Design
A simple vertical timeline design in CSS
Author: Pranjal Goswami (pranjal-goswami)
Links: Source Code / Demo
Created on: March 28, 2015
Made with: HTML, CSS
Tags: timeline, vertical, purecss, vertical timeline
65. Timeline CSS
Author: Soufiane Abid (SoufianeAbid)
Links: Source Code / Demo
Created on: February 27, 2016
Made with: HTML, CSS, JS
66. Advanced TimeLine : HTML / CSS / JavaScript
Author: MO7AMED EL DMRDASH (mo7amedk7alid29)
Links: Source Code / Demo
Created on: June 6, 2017
Made with: HTML, CSS, JS
67. Responsive Timeline
Live at https://jubishop.com/about-me.html
Author: Justin Bishop (jubishop)
Links: Source Code / Demo
Created on: August 19, 2020
Made with: HTML, CSS
Tags: timeline, responsive, animated
68. Responsive Vertical Timeline With Html5 And CSS3 - Responsive Design
Responsive Vertical Timeline With Html5 and CSS3 - Responsive Design
Author: Okba Design (Okba-Design)
Links: Source Code / Demo
Created on: July 22, 2020
Made with: HTML, CSS
Tags: responsive, vertical, timeline, with, html5
69. Pure CSS Timeline Design With Cool Hover Effects
Pure CSS Timeline Design With Cool Hover Effects
Author: Okba Design (Okba-Design)
Links: Source Code / Demo
Created on: July 22, 2020
Made with: HTML, CSS
Tags: pure, css, timeline, designwith, cool
70. Timeline
A simple way to customize an unordered list using pseudo-elements. The list decoration can be anything - even an image.
Author: Shireen Taj (TajShireen)
Links: Source Code / Demo
Created on: July 9, 2020
Made with: HTML, SCSS
Tags: lists, unordered-list, list, timeline
71. Super Simple Timeline
Super simple vertical timeline code for creating a vertical timeline. Font Awesome icons included.
Author: HTML Codex (htmlcodex)
Links: Source Code / Demo
Created on: June 26, 2020
Made with: HTML, CSS
Tags: timeline, css3-timeline, simple-timeline, flat-timeline
72. CSS3 Vertical Timeline
CSS3 vertical timeline for displaying the stories of companies vertically
Author: HTML Codex (htmlcodex)
Links: Source Code / Demo
Created on: June 25, 2020
Made with: HTML, CSS
Tags: timeline, css3-timeline, vertical-timeline, simple-timeline
73. Timeline Phone App
I wanted to explore coding from a UI design. Here is the original design: https://dribbble.com/shots/1980532-Timeline-Profile/ I decided to make updates to the colors & to the order of the timeline, making the first tasks of the day appear at the top.
Author: Jennifer Misewicz (jennmez)
Links: Source Code / Demo
Created on: June 14, 2020
Made with: HTML, SCSS
Tags: html, css, ui, timeline, phoneapp
74. Responsive Vertical Timeline
Responsive vertical timeline with Bootstrap 4 is suited to build a timeline or life cycle or story cycle of company or agency
Author: HTML Codex (htmlcodex)
Links: Source Code / Demo
Created on: June 6, 2020
Made with: HTML, CSS
Tags: timeline, vertical timeline, responsive timeline, bootstrap timeline
75. Responsive Timeline
Author: Gabriel Toledo (gatoledo1)
Links: Source Code / Demo
Created on: May 27, 2020
Made with: HTML, CSS
Tags: timeline, timeline responsive, bootstrap timeline, pure-css
Horizontal Timelines
1. Nested & Color Coded Interactive Timeline
Author: Kent Chang (kentchangdesign)
Links: Source Code / Demo
Created on: December 3, 2017
Made with: HTML, Sass, TypeScript
2. Responsive History Timeline
Author: Dejan Babić (microfront)
Links: Source Code / Demo
Created on: October 12, 2017
Made with: HTML, SCSS, JS
Tags: responsive timeline, history timeline, jquery timeline, horizontal timeline, responsive history timeline
3. PS Group Timeline 2
Author: Abhishek Raj (abhishekraj)
Links: Source Code / Demo
Created on: October 3, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
4. Building A Horizontal Timeline With CSS And JavaScript
Read full tutorial by George Martsoukos on Envato Tuts+!
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo
Created on: April 25, 2017
Made with: HTML, CSS, Babel
5. Timeline
Author: cenda (cenda)
Links: Source Code / Demo
Created on: March 13, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: skodovka
6. 4 Panel Timeline CSS
CSS only timeline for a client. Mobile styles coming soon.
Author: Jeff Glenn (jeffglenn)
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, SCSS
Tags: timeline, css, panel
7. Timeline Sequence V1
Author: Youssef (xander1820)
Links: Source Code / Demo
Created on: June 3, 2016
Made with: HTML, CSS, JS
8. Horizontal Timeline Mockup V2
Author: Xin YAO (TriVector)
Links: Source Code / Demo
Created on: February 18, 2016
Made with: HTML, CSS, JS
9. HR Timeline
Author: Youri (yourinium)
Links: Source Code / Demo
Created on: February 14, 2016
Made with: HTML, CSS
10. Horizontal Timeline In CSS
This is a horizontal timeline that will be used with a dynamic set of no more than maybe 5 dates. To do: Add year to the calculation
Author: Adam Kimmerer (AdamKimmerer)
Links: Source Code / Demo
Created on: December 17, 2015
Made with: HTML, SCSS, JS
Tags: timeline, horizontal, jquery, codyhouse, dynamic
11. Horizontal Timeline
Author: Ritesh Kumar (ritz078)
Links: Source Code / Demo
Created on: December 24, 2015
Made with: HTML, CSS, JS
12. Untitled
Author: Alberto (Naasa21)
Links: Source Code / Demo
Created on: July 2, 2015
Made with: HTML, CSS, JS
13. Vertical Timeline
An easy to customize, responsive timeline. We 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. Article and Download on Cody: http://codyhouse.co/gem/vertical-timeline/
Author: CodyHouse (codyhouse)
Links: Source Code / Demo
Created on: June 12, 2014
Made with: HTML, SCSS, JS
Tags: timeline, bounce, animation, jquery, flat
14. Animated Circle Timeline
Timeline with animated items that appear on hover of the corresponding time slot
Author: Jen Huang (jen-huang)
Links: Source Code / Demo
Created on: December 11, 2014
Made with: HTML, SCSS, JS
Tags: timeline
15. Untitled
Author: Elton Mesquita (eltonmesquita)
Links: Source Code / Demo
Created on: August 27, 2014
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
16. Timeline
Based on the Dribbble shot Timeline by Gabe Abadilla - http://dribbble.com/shots/562262-Timeline
Author: Clint Brown (clintabrown)
Links: Source Code / Demo
Created on: September 28, 2013
Made with: HTML, SCSS
Tags: dribbble, css3, timeline, ui, layout
17. CSS3 Horizontal Timeline
Author: Peiwen Lu (P233)
Links: Source Code / Demo
Created on: May 17, 2013
Made with: HTML, Sass
Vertical Timelines
1. CSS Timeline With Custom Properties
Author: Stas Melnikov (melnik909)
Links: Source Code / Demo
Created on: September 30, 2017
Made with: HTML, CSS
Tags: ui, css, timeline, web-design
2. Timeline Created With CSS Grid
Responsive timeline created with CSS Grid. Browsers that do not support CSS Grid will get the mobile version of the timeline.
Author: Dianna Cheng (girlgeek)
Links: Source Code / Demo
Created on: July 14, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-grid, sass, codepenchallenge, pug, cpc-dt-dd
3. Timeline Custom Counter With Gradient Border
Author: Lauren Chilcote (letsbleachthis)
Links: Source Code / Demo
Created on: October 27, 2018
Made with: HTML, SCSS
4. Responsive Timeline Concept
A small timeline concept for Customer's life cycle or a particular contract's life cycle.
Author: Jones Joseph (jo_Geek)
Links: Source Code / Demo
Created on: September 20, 2018
Made with: HTML, CSS
Tags: timeline, history, concept, interface, responsive
5. Timeline CSS
Author: Jonathan Snook (snookca)
Links: Source Code / Demo
Created on: May 10, 2018
Made with: HTML, CSS
6. Scroll Timeline
Author: Viktor (lebedevdesigns)
Links: Source Code / Demo
Created on: February 18, 2018
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
7. CSS Timeline For Giggles
Author: Alan Houser (alanhouser)
Links: Source Code / Demo
Created on: January 24, 2018
Made with: HTML, Less
8. Vertical Left And Right Timeline
Vertical timeline going from left to right
Author: CP Lepage (cplepage)
Links: Source Code / Demo
Created on: January 23, 2018
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: timeline, bootstrap, responsive, left, right
9. Simple Responsive Timeline
Author: keith.geek (keithwyland)
Links: Source Code / Demo
Created on: September 1, 2017
Made with: HTML, SCSS
10. Responsive Slider Timeline With Swiper
A responsive slider timeline made with Swiper lib.
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: August 30, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: timeline, slider, swiper, responsive
11. Advanced TimeLine : HTML / CSS / JavaScript
Author: MO7AMED EL DMRDASH (mo7hamed)
Links: Source Code / Demo
Created on: June 6, 2017
Made with: HTML, CSS, JS
12. Bitcoin Timeline With Fixed Header Using Flexbox
A timeline with fixed header using flexbox. Data is not correct or complete. Only for demo.
Author: Matys (mathiesjanssen)
Links: Source Code / Demo
Created on: February 2, 2017
Made with: HTML, SCSS, JS
Tags: timeline, sass, flexbox, sticky, bitcoin
13. Project Timeline
Author: Russell Bishop (russelllighthouse)
Links: Source Code / Demo
Created on: February 19, 2017
Made with: HTML, SCSS
14. CSS Timeline
Author: Andres (Fahrek)
Links: Source Code / Demo
Created on: January 25, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
15. Vertical Timeline CSS
Author: Andres (Fahrek)
Links: Source Code / Demo
Created on: January 25, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
16. Flexbox Timeline Layout
Column-based flexbox timeline layout. The goal is to have clean, semantic HTML while creating a (somewhat complex) timeline-looking layout.
Author: Paul Barker (paulhbarker)
Links: Source Code / Demo
Created on: January 9, 2017
Made with: HTML, SCSS
Tags: timeline, layout, flexbox
17. Single Div Timeline
Author: Niels Voogt (NielsVoogt)
Links: Source Code / Demo
Created on: December 28, 2016
Made with: HTML, SCSS
18. CSS Timeline
Author: Rafael Youakeem (Youakeem)
Links: Source Code / Demo
Created on: December 26, 2016
Made with: HTML, SCSS
19. Timeline
Author: Zed Dash (OfficialAntarctica)
Links: Source Code / Demo
Created on: October 29, 2016
Made with: HTML, SCSS
20. Timeline
Author: Zed Dash (OfficialAntarctica)
Links: Source Code / Demo
Created on: October 29, 2016
Made with: HTML, SCSS
21. Comments & Feeadbacks & History Timeline
Double side comment timeline tweenmax
Author: Hosam Elnabawy (hosamsam)
Links: Source Code / Demo
Created on: October 18, 2016
Made with: HTML, SCSS, JS
Tags: timeline, comment, multi, tweenmax
22. [UI DESIGN] Morning Timeline !
this is my first ui design =)) hope you like it !
Author: Hưng Nguyễn (ZeroX-DG)
Links: Source Code / Demo
Created on: September 10, 2016
Made with: HTML, SCSS, JS
23. Vertical Timeline
Author: Sava Lazic (savalazic)
Links: Source Code / Demo
Created on: September 4, 2016
Made with: HTML, SCSS, JS
Tags: vertical, timeline, material, animation
24. Timeline UI
CSS implementation of dribble sketch for training purposes original design: https://dribbble.com/shots/1980532-Timeline-Profile/
Author: Simon Reinsperger (abisz)
Links: Source Code / Demo
Created on: September 4, 2016
Made with: HTML, SCSS
Tags: ui, timeline, material design, ux
25. Simple Responsive Timeline
Author: Brady Wright (phasethree)
Links: Source Code / Demo
Created on: April 28, 2016
Made with: HTML, SCSS
Tags: timeline, responsive, vertical
26. Vertical Timeline
Author: Sava Lazic (savalazic)
Links: Source Code / Demo
Created on: September 4, 2016
Made with: HTML, SCSS, JS
Tags: vertical, timeline, material, animation
27. Simple Responsive Timeline
Author: Brady Wright (phasethree)
Links: Source Code / Demo
Created on: April 28, 2016
Made with: HTML, SCSS
Tags: timeline, responsive, vertical
28. YGC V2 Timeline
Author: Yago Gonzalez (ygc)
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, SCSS
29. Pretty Timeline
Inspired by Anton Aheichanka's Timeline & Profile on Dribbble. Check out the original work here: https://dribbble.com/shots/1980532-Timeline-Profile
Author: Evan Wieland (EvanWieland)
Links: Source Code / Demo
Created on: July 14, 2016
Made with: HTML, Sass
Tags: timeline, pretty
30. CSS Timeline V2
Author: Tristan White (triss90)
Links: Source Code / Demo
Created on: May 27, 2016
Made with: HTML, SCSS
31. YGC V2 Timeline
Author: Yago Gonzalez (ygc)
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, SCSS
32. Building A Vertical Timeline With CSS And A Touch Of JavaScript
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo
Created on: May 24, 2016
Made with: HTML, CSS, JS
33. CSS Timeline
Was inspired to code up a timeline based on some Dribbble shots that I seen.
Author: Darcy Voutt (darcyvoutt)
Links: Source Code / Demo
Created on: March 10, 2015
Made with: HTML, Less, JS
Tags: timeline
34. Collapsable Timeline
Author: Barney Parker (barney-parker)
Links: Source Code / Demo
Created on: November 26, 2015
Made with: HTML, CSS, JS
Tags: timeline, collapse
35. CSS3 Timeline
Fully responsive mobile first CSS Timeline.
Author: Krishna Babu (krishnab)
Links: Source Code / Demo
Created on: March 5, 2015
Made with: HTML, CSS
Tags: css timeline, timeline, history, css based timeline
36. Animated SVG Travel Timeline
Work in progress. Going to be an animated svg travel timeline Inspired by this dribble shot
Author: Vince Brown (Vince_Brown)
Links: Source Code / Demo
Created on: April 22, 2015
Made with: HTML, SCSS, JS
37. CSS Timeline
Was inspired to code up a timeline based on some Dribbble shots that I seen.
Author: Darcy Voutt (darcyvoutt)
Links: Source Code / Demo
Created on: March 10, 2015
Made with: HTML, Less, JS
Tags: timeline
38. Timeline Animation
Just messing around with a simple animated timeline
Author: Chris Wright (chriswrightdesign)
Links: Source Code / Demo
Created on: February 6, 2015
Made with: HTML, SCSS
Tags: animation, css
39. Narrow Vertical Timelinr
Making a narrow version of the Timelinr plugin to fit on a mobile screen.
Author: Tyler Berry (tylerberry)
Links: Source Code / Demo
Created on: February 3, 2015
Made with: HTML, CSS, JS
40. Timeline For A Portfolio
A timeline inspired by http://kohlhofer.com/, built for a portfolio page.
Author: Andrew R McHugh (armthethinker)
Links: Source Code / Demo
Created on: September 28, 2014
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: portfolio, timeline, bootstrap, responsive
41. Responsive Vertical Timeline
Author: Ratko Solaja (Ratko_Solaja)
Links: Source Code / Demo
Created on: September 20, 2014
Made with: HTML, CSS, JS
42. Vertical Timeline
An easy to customize, responsive timeline. We 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. Article and Download on Cody: http://codyhouse.co/gem/vertical-timeline/
Author: CodyHouse (codyhouse)
Links: Source Code / Demo
Created on: June 12, 2014
Made with: HTML, SCSS, JS
Tags: timeline, bounce, animation, jquery, flat
43. Timeline Scribble
Author: Michaela (Fischaela)
Links: Source Code / Demo
Created on: April 20, 2014
Made with: HTML, SCSS
Tags: timeline, animation, rotate, box-shadow
44. Timeline
Author: Ross McNeil (rossmcneil)
Links: Source Code / Demo
Created on: January 7, 2014
Made with: HTML, CSS
Tags: timeline
45. CSS Timeline
Fully responsive CSS Timeline. Full article with explanation: http://nilswe.com/lab/css-timeline/
Author: Nils Wittler (NilsWe)
Links: Source Code / Demo
Created on: June 27, 2013
Made with: HTML, CSS
Tags: timeline, responsive
46. CSS3 Timeline
Please set the $vertical variable to false to see the horizontal version.
Author: Peiwen Lu (P233)
Links: Source Code / Demo
Created on: May 14, 2013
Made with: HTML, Sass
