naskya/firefish
1
0
Fork 1
mirror of https://example.com synced 2024-11-24 06:16:39 +09:00
Code Issues Activity

🙏

Browse source
This commit is contained in:
ThatOneCalculator 2022-07-27 12:27:09 -07:00
parent e1d6e910f7
commit 76ce3f80de
1 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
packages/client/src/components/global/loading.vue
View file

@ -25,6 +25,30 @@ const props = withDefaults(defineProps<{
<style lang="scss" module>
/* Credit to https://codepen.io/supah/pen/BjYLdW */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
.root {
padding: 32px;
text-align: center;
@ -62,33 +86,9 @@ const props = withDefaults(defineProps<{
z-index: 999;
width: var(--size);
height: var(--size);
animation: rotate 2s linear infinite;
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
animation: spin 2s linear infinite;
&.path {
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
stroke: var(--accent);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;