natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

🙏

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