The latest articles on DEV Community by Constantin Groß (@grossconstantin). https://dev.to/grossconstantin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F602851%2F6b05b203-0403-456b-909c-a3735c955756.jpg https://dev.to/grossconstantin en Constantin Groß Wed, 24 Mar 2021 11:13:27 +0000 https://dev.to/grossconstantin/single-element-circle-progress-loader-7b6 https://dev.to/grossconstantin/single-element-circle-progress-loader-7b6 <p>A circle progress loader for modern browsers, using only a single element and no SVG. Making use of CSS variables, mask-image and conic-gradient. The only downside is that there's no smooth transition on the outer ring. (But you could use two variables for the actual progress with decimals and a rounded value for display and update the progress more frequently.)</p> <p><iframe height="600" src="https://codepen.io/Connum/embed/gOgpGog?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css webdev