diff --git a/src/lib/components/WaterfallView.svelte b/src/lib/components/WaterfallView.svelte index 2e4434858758bf7b8076fa7057224b2735dd603f..c8dc32aca3ff056c3f697fe7c73e733ea36149b0 100644 --- a/src/lib/components/WaterfallView.svelte +++ b/src/lib/components/WaterfallView.svelte @@ -891,23 +891,23 @@ <div class="relative"> {#if isCalculationRunning} <div class="absolute inset-0 bg-white z-50" out:fade> - <div class="flex flex-col gap-5 m-2 p-2 animate-pulse"> + <div class="flex flex-col gap-5 m-2 p-2 animate-pulse-2"> {#each [2, 3, 2] as row} <div class="flex flex-col gap-2"> - <div class="bg-neutral-200 w-24 h-4" /> + <div class="bg-neutral-300 w-24 h-4" /> <div class="flex gap-4"> {#each Array(row) as _} <div class="h-9 flex items-center bg-white text-neutral-600 border rounded-full overflow-hidden" > - <div class="bg-neutral-200 w-9 h-9" /> - <div class="bg-neutral-200 mx-2 w-28 h-4" /> + <div class="bg-neutral-300 w-9 h-9" /> + <div class="bg-neutral-300 mx-2 w-28 h-4" /> </div> {/each} </div> </div> {/each} - <div class="bg-neutral-200 h-72" /> + <div class="bg-neutral-300 h-72" /> </div> </div> {/if} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 20626bd5981799a9b07a4fcc96f3c9b1f9611ffe..1cc4b8e1750760a8a14e9a61c1d71738931310f9 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -25,6 +25,7 @@ const config = { extend: { animation: { blink: "blinker 300ms ease-in 2", + "pulse-2": "pulse-2 1.7s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, backgroundImage: { /* Graph paper - Heropatterns.com échelle réduite */ @@ -73,6 +74,14 @@ const config = { blinker: { "50%": { opacity: "60%" }, }, + "pulse-2": { + "0%, 100%": { + opacity: 1, + }, + "50%": { + opacity: 0.2, + }, + }, }, scale: { 25: "0.25",