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