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/poWgdVV
Shoutout to Temani Afif for helping me with the masks. He is amazing and you should follow him on Twitter: https://twitter.com/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.
