mirror of
https://github.com/ershisan99/coolify.git
synced 2025-12-18 12:33:06 +00:00
23a4ebb74a
Changed the whole tech stack to SvelteKit which means: - Typescript - SSR - No fastify :( - Beta, but it's fine! Other changes: - Tailwind -> Tailwind JIT - A lot more
80 lines
2.2 KiB
Svelte
80 lines
2.2 KiB
Svelte
<style lang="postcss">
|
|
.loader {
|
|
width: 8px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
display: block;
|
|
margin: 20px auto;
|
|
position: relative;
|
|
background: currentColor;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
animation: animloader 0.3s 0.3s linear infinite alternate;
|
|
}
|
|
|
|
.loader::after,
|
|
.loader::before {
|
|
content: "";
|
|
width: 8px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
background: currentColor;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 20px;
|
|
box-sizing: border-box;
|
|
animation: animloader 0.3s 0.45s linear infinite alternate;
|
|
}
|
|
.loader::before {
|
|
left: -20px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
@keyframes animloader {
|
|
0% {
|
|
height: 48px;
|
|
}
|
|
100% {
|
|
height: 4px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export let github = false;
|
|
export let githubLoadingText = "Loading GitHub...";
|
|
export let fullscreen = true;
|
|
</script>
|
|
|
|
{#if fullscreen}
|
|
{#if github}
|
|
<div class="fixed left-0 top-0 flex flex-wrap content-center h-full w-full">
|
|
<div class="main flex justify-center items-center">
|
|
<div class="w-64">
|
|
<svg
|
|
class=" w-28 animate-bounce mx-auto"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
><path
|
|
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
|
></path></svg
|
|
>
|
|
<div class="text-xl font-bold text-center">
|
|
{githubLoadingText}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="main fixed left-0 top-0 flex flex-wrap content-center h-full">
|
|
<span class=" loader"></span>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
|