How to create a progress bar with HTML and CSS
Tutorial on how to create a progress bar component with a single HTML element and vanilla CSS (no JavaScript needed).
Source code for the demo: https://codepen.io/alvaromontoro/full...
Shoutout to Temani Afif for helping me with the masks. He is amazing and you should follow him on Twitter: / challengescss
In this video I used and discussed:
Positioning (relative and absolute)
Background gradients
@keyframes and Animations
@property and custom properties
The aspect-ratio property
Attributes selectors and specificity
...And many more.