Timeframe is a library for creating a beautiful and interactive timeline using jQuery and HTML5.

simple horizontal timeline css, dynamic horizontal timeline, draw a timeline, timeline drawing examples

Creative Progress Bar Timeline Animation with CSS Only Without Javascript or Jquery

How to make use of it:

1. Load the jQuery JavaScript library and the jQuery timeframe.js script into the project.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="lib/timeframe.js"></script>

2. Create an empty element that acts as a container for your timeline.

<div id="timeframe"></div>

3. Add your own custom events to the timeline.

var starWarsFilms = {
  name: "Star Wars Films",
  color: "#000000",
  events: [
    {
      name: "A New Hope",
      date: "1977-05-25"
    },
    {
      name: "The Empire Strikes Back",
      date: "1980-05-21"
    },
    {
      name: "Return of the Jedi",
      date: "1983-05-25"
    }
  ]
};

4. Set a start/end date and draw a timeline inside the empty container you just created.

var t = Timeframe("#timeframe")
  .addCategory(starWarsFilms)
  .start("1975-01-01")
  .end("1985-01-01")
  .draw();

5. Default options.

tickHeight: 8,
extHeight: 10

Drawing A Simple Horizontal Timeline, timeframejs Plugin/Github

See Demo And Download

Official Website(andrewjensen): Click Here

This superior jQuery/javascript plugin is developed by andrewjensen. For extra advanced usage, please go to the official website.