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 astyle
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…
Top comments (5)
Because ANY!
<tag-name>
with a dash in it, IS a validHTMLElement
,you can write this without DIVs AND without JavaScript:
Explanation Dev.to post: dashed-html.github.io
Your CodePen to an inline JSFiddle:
<div class="progressbar>"
changed to<progress-bar>
.progressbar
toprogress-bar
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…
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 validHTMLElement
, notHTMLUnknownElement
as some blogs claim.This was my chain of thought: (after reading: web.dev/articles/declarative-shado...)
<tag-name>
, and CSS applied, when you omit the<template>
?Yes, they are Custom Elements, UNdefined Custom Elements, but valid
HTMLElement
, so you can treat them like anyHTMLElement
, which makes it valid to replace all<divs>
with a meanigful name.all without requiring any JavaScript
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…
awesome!