edge-frfox/chrome/tabbar/spinner-progress.svg
2021-05-09 06:39:07 +08:00

6 lines
1.1 KiB
XML

<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes stroke-rotate{12.5%{stroke-dashoffset:var(--min-gap);transform:rotate(0)}12.5001%,25%{transform:rotateX(180deg) rotate(90deg)}0%,25%{stroke-dashoffset:var(--max-gap)}25.0001%,37.5%{transform:rotate(270deg)}37.5%{stroke-dashoffset:var(--min-gap)}37.5001%,50%{transform:rotateX(180deg) rotate(180deg)}50%{stroke-dashoffset:var(--max-gap)}50.0001%,62.5%{transform:rotate(180deg)}62.5%{stroke-dashoffset:var(--min-gap)}62.5001%,75%{transform:rotateX(180deg) rotate(270deg)}75%{stroke-dashoffset:var(--max-gap)}75.0001%,87.5%{transform:rotate(90deg)}87.5%{stroke-dashoffset:var(--min-gap)}87.5001%,to{transform:rotateX(180deg) rotate(360deg)}to{stroke-dashoffset:var(--max-gap)}}:root{--radius:calc(2 * 3.1415926536 * 7.5px);--max-gap:calc(var(--radius) * .99);--min-gap:calc(var(--radius) * .25)}
</style>
<circle cx="50%" cy="50%" r="7.5" style="fill:transparent;stroke-dasharray:var(--radius);stroke:context-fill;stroke-width:1;stroke-linecap:round;transform-origin:center;animation:stroke-rotate calc(1.333s*4) cubic-bezier(.35,0,.25,1) infinite both"/>
</svg>