studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(react) add Loader component

Browse Source 
The first use of this loader will be inside the DataGrid for its
loading state. Its colors are based on the existing primary
colors tokens.
This commit is contained in:
Nathan Vasse
2023-03-06 15:56:01 +01:00
committed by NathanVss
parent b84af99c36
commit 8e078c87c2
5 changed files with 58 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/react/src/components/Loader/index.scss Normal file
View File

@@ -0,0 +1,34 @@
.c__loader {
width: 48px;
height: 48px;
border-radius: 50%;
position: relative;
animation: rotate 1s linear infinite
}
.c__loader::before , .c__loader::after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0;
border-radius: 50%;
border: 5px solid var(--c--theme--colors--primary-700);
animation: prixClipFix 2s linear infinite ;
}
.c__loader::after{
border-color: var(--c--theme--colors--primary-400);
animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
inset: 6px;
}
@keyframes rotate {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
@keyframes prixClipFix {
0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}