Conic gradient Spinner css

⚠️⚠️ This example is for demonstration purposes only, do not use in production websites yet ⚠️⚠️

I want to demonstrate two new features in CSS

👉🏻 Conic gradients - they are similar to repeating gradients but instead of appearing linearly, they are applied around a point (like a circle)

👉🏻 @ property
This is a feature that is not stable yet - available only in Chrome and Edge at the time of writing this. Future implementation of this might also change.

This API allows us to define the format of custom properties - also know as CSS variables. We can provide type checking and syntax for these custom properties.

But the best part is this, we can now animate using these custom properties! Which is what we are doing here, moving the arc angle from 0deg to 360deg for this counter effect. 😎

Remember there are still accessibility issues and performance issues if you attach this to large elements, so I strongly recommend not to start using this, be aware that a lot of cool CSS features are on their way 🤩

#css
#csstricks
#webdesign
#frontend
#javascript
#webdevelopment
#html
#reactjs
#coding
#fullstack
Post by @baby_wolf_codes

Видео Conic gradient Spinner css канала julián Vélez