Title:
Timeline Custom Counter with Gradient Border
Created on:
October 27, 2018
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant gradient CSS timeline created with HTML and SCSS. It has a vertical numbered layout that’s easy to customize and utilize in applications.
Title:
Building a Vertical Timeline With CSS and a Touch of Javascript
Created on:
May 24, 2016
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautiful responsive vertical timeline created using HTML, CSS, and Javascript. Provides a pleasing animation as you move down.
Title:
Horizontal timeline with sliding effects
Created on:
December 24, 2015
Made with:
HTML, CSS, JQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A delightful horizontal timeline with articles attached using HTML, CSS, and Jquery. In the timeline, a proper valid distance is given for each date. Fill in the color as you go further in the timeline with a nice animation.
Title:
Building horizontal timeline
Created on:
April 27, 2017
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
Babel, Hammer.js
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A clean and nice looking horizontal CSS timeline where for each steps cards are shown also it is responsive for mobile created using HTML, CSS, and Javascript.
Title:
Classic timeline
Created on:
January 12, 2014
Made with:
HTML(Haml), SCSS
Responsive:
No
Dependencies:
Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A delightful horizontal timeline in only HTML(Haml) and SCSS. For each step in the timeline, there are cards attached, and also hover effects are given for each card. Different light colors are used for each element.
Title:
Horizontal timeline with swiper
Created on:
June 19, 2020
Made with:
HTML, SCSS, Vue
Responsive:
Yes
Dependencies:
Vue.js, Swiper.js, Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautiful horizontal CSS timeline with controls to swipe timeline using Vue.js. Animations are given on swipe functionality. You can also drag the timeline with a mouse and smooth animations are also given on that using Swiper.js
Title:
Animated horizontal timeline
Created on:
November 15, 2016
Made with:
HTML, SCSS, JQuery
Responsive:
No
Dependencies:
JQuery, Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An animated horizontal timeline with smooth animations are given on hover created using HTML, SCSS, and JQuery. Gradient background is also given.
Title:
Timeline
Created on:
July 03, 2018
Made with:
HTML, CSS, JQuery
Responsive:
No
Dependencies:
JQuery, Mordernizr
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A horizontal timeline with months as time steps created using HTML, CSS, and JQuery. Nice transition effects are given for each timelapse. You can put this on your website with some articles.
Title:
Vertical Timeline
Created on:
June 12, 2014
Made with:
HTML, SCSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An amazing vertical timeline created with HTML, SCSS, and Javascript. Provides you with animated, mini icons as markers. Very smooth animation effects as you go down the timeline.
Title:
Simple horizontal timeline
Created on:
October 13, 2016
Made with:
HTML, CSS, JQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple yet elegant horizontal timeline containing the information of each employee. It was created using HTML, CSS, and JQuery.
Title:
Dynamic horizontal timeline
Created on:
February 09, 2016
Made with:
HTML, SCSS, JQuery
Responsive:
No
Dependencies:
jQuery, Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A dynamic horizontal timeline createdusing HTML, SCSS, and JQuery. There is a transition effect for the timeline and a sliding effect for content.
Title:
Horizontal timeline responsive
Created on:
November 08, 2017
Made with:
HTML, SCSS
Responsive:
Yes
Dependencies:
Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An elegant responsive horizontal CSS timeline created using HTML and SCSS. For medium-size devices, it becomes a vertical timeline to preserve its responsiveness.
Title:
CSS Timeline
Created on:
June 27, 2013
Made with:
HTML, CSS.
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An elegant milestone timeline, that is very easy to implement and modify as it createdonly using HTML and CSS. Looks very minimal and pretty. Each marker provides you with sections that describe the title, time, and a short description.
Title:
Classic animated horizontal timeline
Created on:
September 28, 2016
Made with:
HTML, CSS, JQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A classic clean-looking horizontal timeline with animations are created using HTML, CSS, and jQuery. If you click on points on the timeline it will show you a card with a fade-in transition effect.
Title:
Responsive slider timeline with Swiper
Created on:
August 30, 2017
Made with:
HTML, SCSS, Javascript(Swiper)
Responsive:
Yes
Dependencies:
Javascript
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A responsive and unique vertical CSS timeline that lists all the years and beautifully transitions into new headers and descriptions along with a background picture when clicked. Created using Javascript library Swiper.
Title:
Responsive horizontal timeline using slick
Created on:
June 02, 2021
Made with:
HTML, SCSS, JQuery, Bootstrap
Responsive:
Yes
Dependencies:
JQuery, Sass, slick-carousel (1.9), Bootstrap (4.5)
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A sophisticated timeline for both text and or images created using HTML, Bootstrap, SCSS, Jquery. Slick.js is used for the carousel effects in this timeline.
Title:
Horizontal timeline with jquery
Created on:
July 14, 2017
Made with:
HTML, Sass, JQuery
Responsive:
Yes
Dependencies:
jQuery, Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A responsive CSS timeline with static content createdusing HTML(Pug), Sass, and JQuery. On a broad timeline, the content looks clear and effective to explain the details.
Title:
Verticle Timeline
Created on:
August 05, 2016
Made with:
HTML, SCSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A classic vertical timeline with cards as an item for each occasion. Created using HTML and SCSS. It looks amazing lining up the cards with image placeholders in the timeline.
Title:
timeline
Created on:
February 02, 2017
Made with:
HTML, SCSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
One of the best on the list, this vertical CSS timeline created with HTML, SCSS, Javascript and looks very sleek with each pointer displaying images along with text and year. The background also changes with smooth transitions and overlays that greatly uplift the look and feel of the timeline.
Title:
Horizontal timeline experiment
Created on:
April 13, 2018
Made with:
HTML, SCSS, JQuery
Responsive:
No
Dependencies:
jQuery, Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautiful horizontal event timeline with cards createdusing HTML, SCSS, and JQuery. There are nice hover effects on each card. When you click on the particular card, all the card on its left will be disabled.
Title:
Order timeline thingy
Created on:
April 13, 2017
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple static horizontal timeline createdusing HTML and SCSS. This shows the order timeline. If you wish, you could also change the timeline by adding the javascript to the code.
Title:
Building a Horizontal Timeline using Javascript and CSS
Created on:
April 25, 2017
Made with:
HTML, CSS(SCSS), Javascript(babel)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Another simple yet beautiful horizontal timeline created using HTML, CSS, and Javascript(Babel). Displays year and description on timestamps. Provided with beautiful arrow buttons to navigate the timeline.
Title:
Quarter wise horizontal timeline
Created on:
July 06, 2018
Made with:
HTML, SCSS, Vue.js
Responsive:
No
Dependencies:
Sass, Vue.js, Swiper.js
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A sophisticated horizontal CSS timeline with card pop-up effect looks nice and clean createdusing Vue.js. If you click the circle on the timeline it will show you a card containing the information along with double borders for the circle.
Title:
Horizontal timeline with icons
Created on:
September 20, 2018
Made with:
HTML, CSS, JQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautiful horizontal timeline for any article with icons createdusing HTML, CSS, and Jquery. Nice animations are given for sliding in content. The timeline looks clean and sharp.
Title:
Dark horizontal timeline
Created on:
May 13, 2020
Made with:
HTML(Pug), SCSS
Responsive:
No
Dependencies:
Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A standard static horizontal CSS timeline createdusing HTML(Pug) and SCSS. You can put your past events or experience in this timeline and add this to your website. It looks great with the dark color scheme.
Title:
Horizontal timeline with scroll bar
Created on:
November 02, 2018
Made with:
HTMl, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautiful horizontal timeline with scroll bar createdusing pure HTML and CSS. Cards are shown as items in the timeline. Cards have a shadow effect and date and time along with the event giving a rich look to the web page.
Title:
Static fixed horizontal timeline
Created on:
November 23, 2017
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A delightful static horizontal timeline with cards shown as opposed to date createdusing pure HTML and CSS. The colors are looking great with the dark color scheme.
Title:
Flexbox horizontal timeline
Created on:
September 12, 2019
Made with:
HTML, CSS, jQuery
Responsive:
Yes
Dependencies:
jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautiful flexbox responsive and interactive horizontal timeline createdusing HTML, CSS, and JQuery. When you hover on the timeline, it highlights the item with the orange color. When you click on the item, there is a smooth sliding animation effect.
Title:
Flexbox Timeline Layout
Created on:
January 09, 2017
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A wonderful vertical CSS timeline with catchy flexbox designs as markers. Created using SCSS, these cards has place for images as well as texts.
Title:
Event timeline
Created on:
December 09, 2018
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple static horizontal timeline created using HTML and SCSS. You can make it responsive with media queries in CSS for the medium devices you can make vertically. You can also change color variables according to your requirements.
