counter ~ afficher un compteur

Cette petite action affiche une compteur qui va progressivement passer d'une valeur de départ à une valeur d'arrivée.

➠ counter : Ajoute un compteur avec prefix et suffix

Cliquer pour lire la documentation

{up counter=0,100}
author LOMART version 1.0 license GNU/GPLv3 inspired jquery-simple-counter de marcovincit
  • counter: nombre de paragraphe
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • width (l,largeur,w) = 0: largeur minimal (par défaut en pixels)
  • mono = 1: force la police en monospace
  • base-css: règles CSS définies par le webmaster (ajout dans le head)
  • start = 0: valeur de départ du compteur
  • end = 100: valeur d'arrivée du compteur
  • easing = swing: ou linear : effet
  • duration = 1500: durée du décompte en millisecondes
  • prefix: texte devant compteur. HTML autorisé
  • suffix: texte après compteur. HTML autorisé

    Un exemple simple

    Un compteur qui va passer de 0 à 250 :

    {up counter=0,250}

    Il suffit d'indiquer la valeur de départ et celle d'arrivée en les séparant par une virgule.

    Quelques options

    UP dispose de actions au 20 novembre 2019

    {up counter=0,70 
      | duration=10000
      | mono=0 
      | width=40px
      | style=font-size:36px;font-weight:bold }
    • l'option principale contient les bornes du compteur.
    • duration permet de faire durer le plaisir. C'est le temps en millisecondes.
    • par défaut, la police utilisée est monospace pour éviter les déplacements inesthétiques du texte autour. Ici, je supprime cette option avec mono=0.
    • Pour éviter le décalage des textes, je fixe une largeur minimale pour le compteur. Le compteur est centré.
    • le style permet de grossir les chiffres du compteur

    UP dispose de au 15 décembre 2019

    {up counter=0,75
      | duration=10000
      | suffix=<small>&thinsp;actions</small>
      | class=bg-bleu t-blanc bd-arrondi p1
      | style=font-size:36px;font-weight:bold }

    Cet exemple me permet de vous montrer l'utilisation de l'option suffix pour ajouter un texte directement dans le compteur. Il est possible de saisir du HTML. Pour info, l'entité est un demi-espace.

    L'option mono n'est pas inactivée pour vous montrer la différence de rendu. Le fait d'utiliser une police monospace rend moins utile la définition d'une largeur minimale.

    L'option class permet de styler le compteur