packages/instant/src/components/ui/spinner.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import * as React from 'react';

import { FullRotation } from '../animations/full_rotation';

export interface SpinnerProps {
    widthPx: number;
    heightPx: number;
}
export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
    return (
        <FullRotation width={`${props.widthPx}px`} height={`${props.heightPx}px`}>
            <svg
                width={props.widthPx}
                height={props.heightPx}
                viewBox="0 0 34 34"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle cx="17" cy="17" r="15" stroke="white" strokeOpacity="0.2" strokeWidth="4" />
                <path
                    d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2"
                    stroke="white"
                    strokeWidth="4"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                />
            </svg>
        </FullRotation>
    );
};