18 lines
777 B
React
18 lines
777 B
React
import React from "react";
|
|
|
|
/**
|
|
* Indeterminate ring spinner.
|
|
*/
|
|
export function Spinner({ size = 18, tone = "accent", stroke = 2.4, style = {} }) {
|
|
const c = { accent: "var(--action-primary)", muted: "var(--text-disabled)", ok: "var(--status-ok)" }[tone] || "var(--action-primary)";
|
|
return (
|
|
<span style={{ display: "inline-flex", ...style }}>
|
|
<style>{`@keyframes ctv-spin{to{transform:rotate(360deg)}}`}</style>
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ animation: "ctv-spin 0.7s linear infinite" }}>
|
|
<circle cx="12" cy="12" r="9" stroke={c} strokeOpacity="0.2" strokeWidth={stroke} />
|
|
<path d="M21 12a9 9 0 0 0-9-9" stroke={c} strokeWidth={stroke} strokeLinecap="round" />
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|