Circular Progress Indicator
Recently I thought it could be cool to have a subtle indicator of the scrolling progress on my website, so I just created a component and shipped it! At the end, it was much easier than expected, also because VueUse has so much nice stuff to offer that really helps you to easily solve common challenges.
The first step was to create a circular progress indicator which I could then use around any circular content even though in this case, I only needed it for my avatar.
Demo
Code
Besides the progress prop, I also added a stroke prop in order to be flexible when applying a different thickness of the progress indicator. This is needed because the bigger the content or element inside the indicator is, the more likely it is to have a thicker line to preserve the correct proportions in relation to each other.
I wanted to use a simple technique without involving SVGs and stuff, so I ended up using the conic-gradient CSS value for the background-image property which I think is quite neat. Read more about it here.
I hope you can find a use case for this to include it somewhere!