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 2017!

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

Instructions

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>

Documentation

Options

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.

Compatibility

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

Download

Latest version is also available on GitHub.

Plugin parameters

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(2017, 1 - 1, 1) (Year, month, day)
lastDay
Example: new Date(2017, 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(2017, 1 - 1, 31)
  },
  {
    stepName : 'February', // displayed between the previous step and this one
    stepDate : new Date(2017, 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 ;-)