Let it Flow!

What is it?

Let it Flow! displays a progress bar to see where you are in a defined timeline.

You want to know "where" you are in a project, a training, a trip, ... Just set a start and an end, then let it flow!

See the example below with 2024!

Another example, a little bit funnier for all those waiting for the weekend: Weekend loading...


Download the plugin, copy and include letItFlow files in your document. Make sure you load the jQuery library too!

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add LetItFlow -->
<script type="text/javascript" src="js/letItFlow.js"></script>
<link rel="stylesheet" href="css/letItFlow.css">
<script type="text/javascript">
  $(document).ready(function() {



After you defined a start and an end date, you can:
  • - Change colors and theme;
  • - Add steps and step names;
  • - Enable or disable the step names;
  • - Enable or disable tooltips when steps are clicked.

NB : If a step name is too long, it will be replace by a symbol ( ■ ). You can see the step name when the mouse over this symbol or progress bar, or click if tooltips are not disabled.


Let it Flow! is compatible with IE9+, Firefox, Chrome, Safari, and Opera.
With IE8, some CSS3 properties will not display (border-radius and shadows), but the plugin remains functional.

Licence & download


Latest version is also available on GitHub.

Plugin parameters

firstDay an lastDay are the only required parameters

Maximum width, with units Example: '800 px'
General theme Boolean: 'dark' / 'light' — Default: 'dark'
Text color on the bar (%) Boolean: 'dark' / 'light' — Default: 'light'
Bar color (hexadecimal or RGB) Example: #000000' or 'rgb(0,0,0)' — Default: '#777'
Define to display a gradient
Example: new Date(2024, 1 - 1, 1) (Year, month, day)
Example: new Date(2024, 12 - 1, 31) (Year, month, day)
Add steps. stepDate is required, stepName is not. Example:
steps : [
    stepName : 'January', // displayed between firstDay this step
    stepDate : new Date(2024, 1 - 1, 31)
    stepName : 'February', // displayed between the previous step and this one
    stepDate : new Date(2024, 2 - 1, 28)
Display step names Boolean: 'true' / 'false' — Default: 'true'
Display tooltip when a step is clicked Boolean: 'true' / 'false' — Default: 'true'
Name displayed between the last defined step and "lastDay"

* There is a "-1" on the month because month ranges from 0 to 11 with the Javascript 'Date' constructor.
You could put directly 0 for January, or 11 for December 11, if it makes more sense to you ;-)