Let it Flow!

Qu'est-ce que c'est ?

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.

Par exemple (ci-dessus) l'année 2018 !

Autre exemple, un peu + fun pour tout ceux qui attendent le weekend avec impatience : Weekend loading...

Instructions

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>

Documentation

Options

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.

Compatibilité

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.

Licence & download

Download

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

Paramètres du plugin

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(2018, 1 - 1, 1) (Année, mois, jour)
lastDay
Dernier jour Exemple : new Date(2018, 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(2018, 1 - 1, 31)
  },
  {
    stepName : 'Février', // étape entre la date précédente et celle-ci
    stepDate : new Date(2018, 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 ;-)