A CSS only time progress bar to use in markdown / GitHub Pages

For our weekly WeAreDevelopers Live Show I wanted to have a way to include a time progress bar into the page we show. The problem there was that these are markdown files using GitHub Pages and whilst I do use some scripting in them, I wanted to make sure that I could have this functionality in pure CSS so that it can be used on GitHub without having to create an html template. And here we are.

You can check out the demo page to see the effect in action with the liquid source code or play with the few lines of CSS in this codepen. Fork this repo to use it in your pages or just copy the _includes folder.

Using the CSS time progress bar

You can use as many bars as you want to in a single page. The syntax to include a bar is the following:

{​% include cssbar.html duration="2s" id="guesttopic" styleblock="yes" %​}

• The duration variable defines how long the progress should take
• The id variable is necessary to and has to be unique to make the functionality work
• If the styleblock is set, the include will add a style with the necessary css rules so you don't have to add them to the main site styles. You only need to do that in one of the includes.

Using the bar in HTML documents

You can of course also use the bar in pure HTML documents, as shown in the codepen. The syntax is:

<div class="progressbar" style="--duration: 2s;">
    <input type="checkbox" id="progress">
    <label for="progress">start</label>
</div>

Don't forget to set a unique id both in the checkbox and the label and define the duration in the inline style.

Drawbacks

• This is a bit of a hack as it is not accessible to non-visual users and abuses checkboxes to keep it CSS only. It is keyboard accessible though.
• In a better world, I'd have used an HTML progress element and styled that one…

Comments

[Danny Engelman]

Because ANY! <tag-name> with a dash in it, IS a valid HTMLElement,
you can write this without DIVs AND without JavaScript:

Explanation Dev.to post: dashed-html.github.io

<progress-bar style="--duration: 20s;">
    <input type="checkbox" id="cb">
    <label for="cb">start</label>
</progress-bar>

Your CodePen to an inline JSFiddle:

• <div class="progressbar>" changed to <progress-bar>
• CSS selector changed from .progressbar to progress-bar

[Christian Heilmann]

Sure, I could have also wrapped this as a custom element, but that would be a different approach. I am not sure if your advice is sensible, as it does make it appear as if it is a custom element and there is no encapsulation of the styles…

[Danny Engelman]

All I changed was the tagname (and corresponding CSS selector) No JavaScript used.

This has nothing to do with style encapulation.
Or "Web Components" for that matter if you consider shadowDOM, templates and the Custom Elements API three defining technologies for "Web Components" (which I did not use, I only changed the tagname)

Browsers treat <tag-name> as valid HTMLElement, not HTMLUnknownElement as some blogs claim.

This was my chain of thought: (after reading: web.dev/articles/declarative-shado...)

• What happens with <tag-name>, and CSS applied, when you omit the <template>?

<tag-name>
  <template shadowrootmode="open">
  </template>
</tag-name>

Yes, they are Custom Elements, UNdefined Custom Elements, but valid HTMLElement, so you can treat them like any HTMLElement, which makes it valid to replace all <divs> with a meanigful name.

all without requiring any JavaScript

[Christian Heilmann]

I'd argue that this is just confusing as it hints at Custom Element functionality that isn't there and can't even be applied as there is no script hook. The idea of extending HTML with Custom Elements was to allow for a move from documents to components. This is just renaming things. The convention is that anything with a dash in it is a custom element independent of the main document and style sheet. That browsers recognise it automatically as a valid HTML element feels to me like a convenience method rather than a standard. Much like any ID also becomes a global JS variable which is a security problem… In other words - what does this solve? A DIV with a class shows that this is a hook for CSS and JS - and doesn't promise any functionality of a component. An HTML element with a dash does…

[Emanuele Bartolesi]

awesome!

[Oscar]

This is really cool!