HTML CSS examples for CSS Widget:Progress Bar
Circular progress bar
<html lang="en"> <head> <title>[SO] Partially transparent radial-gradient()</title> <style> html, body { background-image: linear-gradient(141deg, #e24a00 0%, #f6891f 71%, #fcb732 100%); background-attachment:fixed; } .learn-prog {<!--from w ww.jav a 2 s . c o m--> display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 400px; height: 400px; background-image: radial-gradient(closest-side, white 90%, transparent 90%, transparent 95%, slateblue 95%, slateblue 100%); border: 1px solid #000; } </style> </head> <body translate="no"> <div class="learn-prog"> HELLO </div> <div class="learn-prog" style="margin-left: auto"> MOVE </div> </body> </html>