flyonui/components/radialprogress/object.js

The easiest, free and open-source Tailwind CSS component library with semantic classes.

export default {".radial-progress":{"position":"relative","box-sizing":"content-box","display":"inline-grid","place-content":"center","border-radius":"calc(infinity * 1px)","--tw-font-weight":"var(--font-weight-medium)","font-weight":"var(--font-weight-medium)","color":"var(--color-base-content)","vertical-align":"middle","height":"var(--size)","width":"var(--size)","--value":"0","--size":"5rem","--thickness":"calc(var(--size) / 10)","--radialprogress":"calc(var(--value) * 1%)","transition":"--radialprogress 0.3s linear","&:before":{"position":"absolute","inset":"calc(0.25rem * 0)","border-radius":"calc(infinity * 1px)","content":"\"\"","background":"radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient( currentColor var(--radialprogress), color-mix(in oklab, var(--color-base-content) 20%, transparent) 0 )","webkit-mask":"radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) )","mask":"radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) )"},"&:after":{"position":"absolute","border-radius":"calc(infinity * 1px)","background-color":"currentColor","transition":"transform 0.3s linear","content":"\"\"","inset":"calc(50% - var(--thickness) / 2)","transform":"rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%))"}}};