Skip to content

Commit af4d5f7

Browse files
committed
create spinner component and add animation
1 parent 0c79587 commit af4d5f7

File tree

2 files changed

+64
-0
lines changed

2 files changed

+64
-0
lines changed
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
};
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
}

0 commit comments

Comments
 (0)