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

🎨(react) enhance Loader component styles

Browse Source 
update Loader token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:15:40 +02:00
committed by NathanVss
parent 43337d4f7f
commit dcf1c8b8bb
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/react/src/components/Loader/_index.scss
View File

@@ -11,13 +11,14 @@
inset: 0;
border-radius: 50%;
border-style: solid;
border-color: var(--c--theme--colors--primary-700);
border-color: var(--c--contextuals--border--semantic--brand--primary);
animation: prixClipFix 2s linear infinite;
}
&::after {
border-color: var(--c--theme--colors--primary-400);
animation: prixClipFix 2s linear infinite,
border-color: var(--c--contextuals--border--semantic--brand--secondary);
animation:
prixClipFix 2s linear infinite,
rotate 0.5s linear infinite reverse;
inset: 6px;
}
@@ -48,14 +49,28 @@
}
@keyframes rotate {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
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)}
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);
}
}