39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import * as React from "react";
|
|
|
|
interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
|
|
height?: string;
|
|
width?: string;
|
|
className?: string | undefined;
|
|
}
|
|
|
|
export function CircularBarSpinner({ height = "16px", width = "16px", className = "" }: ICircularBarSpinner) {
|
|
return (
|
|
<div role="status">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
|
|
<g>
|
|
<rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
|
|
<rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
|
|
<rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
|
|
<rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
|
|
<rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
|
|
<rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
|
|
<rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
|
|
<animateTransform
|
|
attributeName="transform"
|
|
calcMode="discrete"
|
|
dur="0.75s"
|
|
repeatCount="indefinite"
|
|
type="rotate"
|
|
values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|