Let it Flow!

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!

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

<!-- 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() {
    $('#example').letitflow();
  });
</script>

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.

Download

Latest version is also available on GitHub.

firstDay an lastDay are the only required parameters

maxWidth

Maximum width, with units Example: '800 px'

themeColor

General theme Boolean: 'dark' / 'light' — Default: 'dark'

colorText

Text color on the bar (%) Boolean: 'dark' / 'light' — Default: 'light'

colorBar

Bar color (hexadecimal or RGB) Example: #000000' or 'rgb(0,0,0)' — Default: '#777'

color2

Define to display a gradient

firstDay

Example: new Date(2024, 1 - 1, 1) (Year, month, day)

lastDay

Example: new Date(2024, 12 - 1, 31) (Year, month, day)

steps

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)
  }
]

stepsLabel

Display step names Boolean: 'true' / 'false' — Default: 'true'

labelTooltip

Display tooltip when a step is clicked Boolean: 'true' / 'false' — Default: 'true'

lastStepName

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 ;-)