Files
website/frontend/src/components/loader.njk
T
terbshaeusser 8211c78287 set base colors
Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
2026-05-24 09:30:52 +02:00

52 lines
1.9 KiB
Plaintext

<template id="tesoft-loader-template">
<style>
@import "/src/styles/default.css";
:host {
display: block;
width: 4.8rem;
height: 4.8rem;
}
@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.loading {
animation: rotate 2s linear infinite;
transform-origin: center;
}
.dark {
fill: var(--dark-gray);
}
.bright {
fill: var(--light-gray);
}
</style>
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle class="dark" cx="32" cy="32" r="32" stroke-width="1.5783"/>
<path class="bright"
d="m32 2a30 30 0 0 0-30 30 30 30 0 0 0 30 30 30 30 0 0 0 30-30 30 30 0 0 0-30-30zm0 4a26 26 0 0 1 26 26 26 26 0 0 1-26 26 26 26 0 0 1-26-26 26 26 0 0 1 26-26zm0 19a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7z"
stroke-width="1.0568"/>
<path class="bright loading"
d="m32 9a23 23 0 0 0-23 23h5a18 18 0 0 1 18-18v-5zm0 7a16 16 0 0 0-16 16h5a11 11 0 0 1 11-11v-5zm11 16a11 11 0 0 1-11 11v5a16 16 0 0 0 16-16h-5zm7 0a18 18 0 0 1-18 18v5a23 23 0 0 0 23-23h-5z"
stroke-width="2.4251"/>
<path class="dark"
d="m45.645 32.951-12.727 12.729 2.1211 2.1211-16.199 16.199h11.312l10.543-10.543 2.1211 2.1211 12.729-12.727-9.9004-9.9004z"
stroke-width="2"/>
<path class="bright"
d="m45.645 35.779-9.8984 9.9004 2.1211 2.1211-16.199 16.199h5.6562l13.371-13.371 2.1211 2.1211 9.9004-9.8984-7.0723-7.0723zm0 4.2441 2.8281 2.8281-5.6562 5.6562-2.8281-2.8281 5.6562-5.6562z"
stroke-width="1.184"/>
</svg>
</template>
<script src="/src/components/loader.ts" type="module"></script>