Skip to content
Snippets Groups Projects
Unverified Commit 0b4abad9 authored by Dorine Lambinet's avatar Dorine Lambinet
Browse files

Supprime composants non utilisés

parent 0a4681f9
No related branches found
No related tags found
1 merge request!301Resolve "Refacto des dossiers de composants"
<script lang="ts">
// Code inspired from: https://github.com/Schum123/svelte-loading-spinners/blob/master/src/Circle2.svelte
interface Props {
// MIT license.
size?: string | number
unit?: string
colorOuter?: string
colorCenter?: string
colorInner?: string
durationMultiplier?: number
durationOuter?: any
durationInner?: any
durationCenter?: any
}
let {
size = "60",
unit = "px",
colorOuter = "#DED500",
colorCenter = "#DED500",
colorInner = "#DED500",
durationMultiplier = 1,
durationOuter = `${durationMultiplier * 2}s`,
durationInner = `${durationMultiplier * 1.5}s`,
durationCenter = `${durationMultiplier * 3}s`,
}: Props = $props()
</script>
<div
class="circle mx-auto my-8"
style="--size: {size}{unit}; --colorInner: {colorInner}; --colorCenter: {colorCenter}; --colorOuter: {colorOuter}; --durationInner: {durationInner}; --durationCenter: {durationCenter}; --durationOuter: {durationOuter};"
></div>
<style>
.circle {
width: var(--size);
height: var(--size);
box-sizing: border-box;
position: relative;
border: 3px solid transparent;
border-top-color: var(--colorOuter);
border-radius: 50%;
animation: circleSpin var(--durationOuter) linear infinite;
}
.circle:before,
.circle:after {
content: "";
box-sizing: border-box;
position: absolute;
border: 3px solid transparent;
border-radius: 50%;
}
.circle:after {
border-top-color: var(--colorInner);
top: 9px;
left: 9px;
right: 9px;
bottom: 9px;
animation: circleSpin var(--durationInner) linear infinite;
}
.circle:before {
border-top-color: var(--colorCenter);
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
animation: circleSpin var(--durationCenter) linear infinite;
}
@keyframes circleSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script lang="ts">
</script>
<p class="flex rounded bg-amber-500 p-3 text-sm leading-normal text-white">
🚧 &nbsp; Cette partie est en construction.
</p>
<script lang="ts">
</script>
<p class="flex rounded bg-amber-500 p-3 text-sm leading-normal text-white">
🚧 &nbsp; Cette page est en construction.
</p>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment