arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-14 17:34:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

🚧 Work in progress

Browse Source
This commit is contained in:
Freeze455
2021-10-06 18:04:36 +02:00
parent 132edbea6e
commit d641513f50
1 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Spinner.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
</template>
<script setup lang='ts'>
</script>
<style lang="scss">
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 25%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
& .path {
stroke: #93bfec;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
}
@keyframes rotate {
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;
}
}
</style>