Styling <progress></progress> with CSS

[Thomasrsm]

What I’m trying to do

Is it possible to style the progress bar that is shown from this command with a CSS snippet?

<progress value="42" max="100"></progress>

Here is a side by side view of a style I like (left) and the native style (right)

[mnvwvnm]

No css style… just an embed image/link

![progress-bar](https://progress-bar.dev/42/)

GitHub - fredericojordan/progress-bar: 📊 Flask API for SVG progress badges

[Erisred]

Check out this article for inspiration. I took some pointers from this SO post, too.

Basically, you need to style all the selectors. I played with this a bit, and everything works as expected. Here are the selectors, play with them to figure things out.

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

Here’s what I got using the SO values…

Looks pretty clunky, but helped me figure out what selectors do what.
Hope that helps!

[cestvrai]

I like progress bars too. This is my temporary css snippet so that progress bars match checklist boxes of any given theme (with the hopes thatl theme developers support their styling eventually):

progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 100px;
height: 18px;
}

progress[value]::-webkit-progress-bar {
background-color: var(--background-primary-alt);
border: 1px solid var(--background-modifier-border);
border-radius: 3px;
box-shadow: inset 0px 0.5px 1px var(--background-zero);
}

progress[value]::-webkit-progress-value {
background: var(--background-modifier-accent);
box-shadow: none;
border-color: transparent;
border-radius: 2px;
}

[Thomasrsm]

Yeah, I am using these currently. Beautiful status bars.
However, I don’t want to go too deep into a workflow that relies on someone else hosting those images forever. Also, they don’t work offline.

[Thomasrsm]

Beautiful! Looks great.
Do you know if there is a way to display the percentage value inside the bar?

(and… the most awesome thing would be to have it change gradually from a red color to a green color as the bar progresses towards 100%, but I guess that is too complicated for a simple CSS snippet)

[Thomasrsm]

Thanks! Very helpful.

[cestvrai]

I think that most awesome thing is possible (but I don’t know how), but as far as I know, there is no way to display the percentage.

You may want to check the underrated and superb Charts plugin by @caronchen for those features. GitHub - caronchen/obsidian-chartsview-plugin: Data visualization solution in Obsidian based on Ant Design Charts.