Here is a CSS Snippet to make Progress Bars like these:
It supports:
- Flat progress bars without percentage (11 builtin values:
#progress 0…progress 10for 0% … 100%) - Taller progress bars with percentage (additionally tag
#show percentage) - Custom progress values with only a single line of extra CSS (e.g.
#almost done= 98%) - Automatic color gradient from red to green
Since it is CSS there is no automation at all. You have to apply all tags manually.
CSS Code
[data-rem-container-tags*="progress"]::before {
--progress-bar-color-s: 80%;
--progress-bar-color-l: 60%;
--progress-bar-color: hsl(calc(var(--progress-bar-progress) * 1.20), 80%, 60%);
--extra-margin: 5px; /* -5px matches left margin of .rem-text */
content: "";
display: block;
box-sizing: border-box;
width: calc(100% + var(--extra-margin));
height: 5px;
border: 1px solid var(--progress-bar-color);
border-radius: 2px;
margin: 6px 0 1px -5px;
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--progress-bar-color), var(--progress-bar-color));
background-size: calc(var(--progress-bar-progress) * 1%);
}
[data-rem-container-tags~="progress-0"]::before { --progress-bar-progress: 0; }
[data-rem-container-tags~="progress-1"]::before { --progress-bar-progress: 10; }
[data-rem-container-tags~="progress-2"]::before { --progress-bar-progress: 20; }
[data-rem-container-tags~="progress-3"]::before { --progress-bar-progress: 30; }
[data-rem-container-tags~="progress-4"]::before { --progress-bar-progress: 40; }
[data-rem-container-tags~="progress-5"]::before { --progress-bar-progress: 50; }
[data-rem-container-tags~="progress-6"]::before { --progress-bar-progress: 60; }
[data-rem-container-tags~="progress-7"]::before { --progress-bar-progress: 70; }
[data-rem-container-tags~="progress-8"]::before { --progress-bar-progress: 80; }
[data-rem-container-tags~="progress-9"]::before { --progress-bar-progress: 90; }
[data-rem-container-tags~="progress-10"]::before { --progress-bar-progress: 100; }
/* Custom progresses */
[data-rem-container-tags*="almost-done"]::before { --progress-bar-progress: 98; }
[data-rem-container-tags*="show-percentage"]::before {
border-radius: 5px;
color: dimgrey;
/* Hack using counter to get --var into content:
https://stackoverflow.com/a/40179718
Note: --var needs to be an integer, chrome won't auto round. */
counter-reset: progress var(--progress-bar-progress);
content: counter(progress) " %";
padding: 2px;
height: fit-content;
text-align: center;
}
I use these rem as tags:
Note: The progress bar is rendered each time a tag contains the word progress. If you find yourself already using tags containing it you have to change the progress tags and the CSS code to use a different word.
Reference-based Progress Bars
A visual alternative to tag based, full width progress bars is render the bar on a reference.
CSS Code
.rem-reference-container[data-rem-tags*="progress"] {
--progress-bar-color-s: 80%;
--progress-bar-color-l: 60%;
--progress-bar-color: hsl(calc(var(--progress-bar-progress) * 1.20), 80%, 60%);
--extra-margin: 5px; /* -5px matches left margin of .rem-text */
display: inline-block;
box-sizing: border-box;
width: 150px;
border: 1px solid var(--progress-bar-color);
border-radius: 5px;
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--progress-bar-color), var(--progress-bar-color));
background-size: calc(var(--progress-bar-progress) * 1%);
text-align: center;
}
.rem-reference-container[data-rem-tags*="progress"] .rem-indented-indicator {
display: none;
}
.rem-reference-container[data-rem-tags*="progress"] .rem-reference-link {
color: black;
}
.rem-reference-container[data-rem-tags~="progress-0"] { --progress-bar-progress: 0; }
.rem-reference-container[data-rem-tags~="progress-1"] { --progress-bar-progress: 10; }
.rem-reference-container[data-rem-tags~="progress-2"] { --progress-bar-progress: 20; }
.rem-reference-container[data-rem-tags~="progress-3"] { --progress-bar-progress: 30; }
.rem-reference-container[data-rem-tags~="progress-4"] { --progress-bar-progress: 40; }
.rem-reference-container[data-rem-tags~="progress-5"] { --progress-bar-progress: 50; }
.rem-reference-container[data-rem-tags~="progress-6"] { --progress-bar-progress: 60; }
.rem-reference-container[data-rem-tags~="progress-7"] { --progress-bar-progress: 70; }
.rem-reference-container[data-rem-tags~="progress-8"] { --progress-bar-progress: 80; }
.rem-reference-container[data-rem-tags~="progress-9"] { --progress-bar-progress: 90; }
.rem-reference-container[data-rem-tags~="progress-10"] { --progress-bar-progress: 100; }
/* Custom progresses */
.rem-reference-container[data-rem-tags~="almost-done"] { --progress-bar-progress: 98; }
Feature Wishlist
Here is a great feature wishlist for more powerful progress bars by @MAB941009 from Discord:
Multiple progress bars per document
One overall progress bar per document (to aggregate the progress bars into one)
One overall progress bar for the whole database (to aggregate all progress bars from every document into one)
A way to query all of the progress bars into a single document
A way to limit the query for the progress bars (eg. by outstanding percentage)
A way to construct meta progress bars from queries (eg. Project A at 25% and Project B at 25% would generate a 50% progress bar)
Colour gradience (eg. <25% red, <50% orange), customisable by colour and progress
Option to replace percentage with completion count (eg. 5/7)
(I recognise some of these features are already implemented, or likely impossible due to the limitations of RemNote’s querying capacity or CSS language.)
Some of this is indeed already supported (mutliple progress bars, color gradient), some can be done with some discipline (you can query all progress bars in a document by tagging each with #progress and Ctrl + F filter for that tag).
Auto-updating Progress Bars via 
Smart Rem
Automatically updating progress values is hard using the v0 Plugin API since it neither allows easy tag management nor easily getting the todo states of rem.
I briefly explored a Smart Rem implementation, but it’s tricky to make it glitch free:
Related:
- More flexible task management / tag management commands – More built-in metadata for todos.