File tree Expand file tree Collapse file tree 2 files changed +64
-0
lines changed
src/features/common/components/spinner Expand file tree Collapse file tree 2 files changed +64
-0
lines changed Original file line number Diff line number Diff line change
1
+ import React from "react" ;
2
+ import { ProgressBar } from "react-aria-components" ;
3
+ import styles from "./spinner.module.scss" ;
4
+
5
+ export const Spinner = ( ) => {
6
+ return (
7
+ < ProgressBar aria-label = "Loading…" isIndeterminate >
8
+ { ( ) => (
9
+ < div className = { styles . circular__spinner } >
10
+ < svg className = { styles . spinner__svg } viewBox = "0 0 20 20" >
11
+ < circle
12
+ className = { styles . spinner__circle }
13
+ cx = "10"
14
+ cy = "10"
15
+ r = "8"
16
+ fill = "none"
17
+ strokeWidth = "4"
18
+ />
19
+ </ svg >
20
+ </ div >
21
+ ) }
22
+ </ ProgressBar >
23
+ ) ;
24
+ } ;
Original file line number Diff line number Diff line change
1
+ .circular__spinner {
2
+ width : 16px ;
3
+ height : 16px ;
4
+ display : inline-block ;
5
+ }
6
+
7
+ .spinner__svg {
8
+ animation : rotate 1s linear infinite ;
9
+ width : 100% ;
10
+ height : 100% ;
11
+ }
12
+
13
+ .spinner__circle {
14
+ stroke : var (--color_fg_default );
15
+ stroke-dasharray : 90 150 ;
16
+ stroke-dashoffset : 0 ;
17
+ stroke-linecap : round ;
18
+ animation : dash 1.5s ease-in-out infinite ;
19
+ }
20
+
21
+ @keyframes rotate {
22
+ 100% {
23
+ transform : rotate (360deg );
24
+ }
25
+ }
26
+
27
+ @keyframes dash {
28
+ 0% {
29
+ stroke-dasharray : 1 , 200 ;
30
+ stroke-dashoffset : 0 ;
31
+ }
32
+ 50% {
33
+ stroke-dasharray : 100 , 200 ;
34
+ stroke-dashoffset : -15 ;
35
+ }
36
+ 100% {
37
+ stroke-dasharray : 1 , 200 ;
38
+ stroke-dashoffset : -126 ;
39
+ }
40
+ }
You can’t perform that action at this time.
0 commit comments