• Quelques infos pour bien utiliser ce template

Différents types de barres

Formules

Barre Simple

if(prop("Completed") / prop("Goal") >= 1, "✅", if(empty(prop("Completed")) and not empty(prop("Goal")), "0%", slice("✦✦✦✦✦✦✦✦✦✦", 0, floor(prop("Completed") / prop("Goal") * 10)) + " " + format(round(prop("Completed") / prop("Goal") * 100)) + "%"))

• ☑️ Décomposition de la formule
• ⚠️ Notes complémentaires

Barre complète

if(prop("Completed") / prop("Goal") >= 1, "✅", slice("✦✦✦✦✦✦✦✦✦✦", 0, floor(prop("Completed") / prop("Goal") * 10)) + slice("✧✧✧✧✧✧✧✧✧✧", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)) + " " + format(round(prop("Completed") / prop("Goal") * 100)) + "%")

• ☑️ Décomposition de la formule
• ⚠️ Notes complémentaires

Barre Basique

if(prop("Completed") / prop("Goal") >= 1, "✓", slice("++++++++++", 0, floor(prop("Completed") / prop("Goal") * 10)) + slice("−−−−−−−−−−", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)))

• ☑️ Décomposition de la formule
• ⚠️ Notes complémentaires

Slider

if(prop("Completed") / prop("Goal") >= 1, "✓", slice("−−−−−−−−−−", 0, floor(prop("Completed") / prop("Goal") * 10)) + "♦︎" + slice("−−−−−−−−−−", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)))

Inspiré par la version de Red Gregory

<aside> 👉🏼 Changer l’esthétique de la barre de progression

Pour des styles différents, il suffit de remplacer les symboles dans la formule.

Par exemple, on peut transformer “✦✦✦✦✦✦✦✦✦✦” en “★★★★★★★★★★”

• Exemples de styles </aside>

Barres avec des émoticones

<aside> <img src="/icons/warning_yellow.svg" alt="/icons/warning_yellow.svg" width="40px" /> La formule est différente des barres simples avec symboles. Elle utilise la fonction replaceAll pour remplacer chaque x par un émoticône. La fonction slice ne fonctionne pas bien avec les émoticônes.

</aside>

Barre de progression émoticône

Barre Simple

if(prop("Completed") / prop("Goal") >= 1, "✅", if(empty(prop("Completed")) and not empty(prop("Goal")), "0%", replaceAll(slice("xxxxxxxxxx", 0, floor(prop("Completed") / prop("Goal") * 10)), "x", "⭐️") + " " + format(round(prop("Completed") / prop("Goal") * 100)) + "%"))

Barre Complète

if(prop("Completed") / prop("Goal") >= 1, "✅", replaceAll(slice("xxxxxxxxxx", 0, floor(prop("Completed") / prop("Goal") * 10)), "x", "🌳") + replaceAll(slice("xxxxxxxxxx", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)), "x", "🌱") + " " + format(round(prop("Completed") / prop("Goal") * 100)) + "%")

<aside> 👋🏻 J’espère que cette page dédiée aux barres de progression t’a plu et te sera utile!

N’hésite pas à consulter mes autres templates :

<aside> <img src="/icons/gift_blue.svg" alt="/icons/gift_blue.svg" width="40px" />

Mes templates gratuits

</aside>

<aside> <img src="/icons/star_blue.svg" alt="/icons/star_blue.svg" width="40px" /> Mes templates premium

</aside>

</aside>

$\color{grey}\rule{2000px}{2px}$

<aside> <img src="/icons/warning_yellow.svg" alt="/icons/warning_yellow.svg" width="40px" /> Ce document a été créé par Marie Gautron WebOrga. Il a été créé pour être utilisé pour un usage personnel. Toute reproduction ou utilisation commerciale est formellement interdite sans autorisation.

</aside>