Let it Flow!

Let it Flow! est un plugin qui sert à afficher une barre de progression, pour savoir où on se trouve dans une période définie.

Vous voulez savoir où vous en êtes pour un projet, une formation, un voyage, ... Il suffit d'indiquer une date de début et de fin.

Téléchargez le plugin, copiez et intégrez les fichiers .js et .css de letItFlow à votre page. N'oubliez pas d'inclure jQuery !
Exemple:

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

Après avoir défini une date de début et de fin, vous pouvez :

• - Modifier les couleurs et le thème (selon la couleur de fond de l'endroit où vous placez la barre de progression).
• - Ajouter des étapes et le nom des étapes.
• - Choisir d'afficher le nom des étapes ou pas.
• - Choisir d'afficher un tooltip (ou info-bulle) lorsque l'on clique sur les étapes.

NB : Si le nom de l'étape est trop long, il est remplacé par un symbole ( ■ ). On peut voir le nom de l'étape en survolant ce symbole ou la barre de progression ou au clic, si les tooltips ne sont pas désactivés.

Let it Flow! est compatible avec IE9+, Firefox, Chrome, Safari, et Opera.
Pour IE8, certaines propriétés CSS3 ne s'afficheront pas (les bords arrondis et les ombres), mais le plugin reste fonctionnel.

Download

La dernière version se trouve également sur GitHub.

Les seuls paramètres indispensables sont firstDay et lastDay

maxWidth

Largeur maximum de la barre, avec unité de mesure Exemple : '800 px'

themeColor

Modifie le thème général (fond de la barre, nom des étapes, dates). Choix : 'dark' / 'light' — Par défaut : 'dark'

colorText

Couleur du texte sur la barre (%) Choix : 'dark' / 'light' — Par défaut : 'light'

colorBar

Couleur de la barre (code hexadécimal ou RGB) Exemple : #000000' ou 'rgb(0,0,0)' — Par défaut : '#777'

color2

À définir pour obtenir un dégradé

firstDay

Premier jour Exemple : new Date(2024, 1 - 1, 1) (Année, mois, jour)

lastDay

Dernier jour Exemple : new Date(2024, 12 - 1, 31) (Année, mois, jour)

steps

Ajouter des étapes. stepDate est obligatoire, stepName ne l'est pas. Exemple :

steps : [
  {
    stepName : 'Janvier', // étape entre la date firstDay et celle-ci
    stepDate : new Date(2024, 1 - 1, 31)
  },
  {
    stepName : 'Février', // étape entre la date précédente et celle-ci
    stepDate : new Date(2024, 2 - 1, 28)
  }
]

stepsLabel

Afficher le nom des étapes au dessus de la barre Choix : 'true' / 'false' — Par défaut : 'true'

labelTooltip

Faire apparaitre le nom de l'étape lorsqu'on clique sur la barre Choix : 'true' / 'false' — Par défaut : 'true'

lastStepName

Nom de la dernière étape

* Il y a un "-1" sur le mois parce que pour la fonction 'Date' de Javascript, les mois vont de 0 à 11, au lieu de 1 à 12.
Vous pourriez très bien mettre directement 0 pour janvier, ou 11 pour décembre, si cela vous parait plus logique ;-)