|
|
|
@ -1,6 +1,5 @@
|
|
|
|
|
<script>
|
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
|
import { fade } from 'svelte/transition';
|
|
|
|
|
|
|
|
|
|
let p = 0;
|
|
|
|
|
let visible = false;
|
|
|
|
@ -52,15 +51,21 @@
|
|
|
|
|
background-color: rgba(255,255,255,0.3);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 998;
|
|
|
|
|
animation: fade 0.4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fade {
|
|
|
|
|
from { opacity: 0 }
|
|
|
|
|
to { opacity: 1 }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
{#if visible}
|
|
|
|
|
<div class="progress-container" transition:fade>
|
|
|
|
|
<div class="progress-container">
|
|
|
|
|
<div class="progress" style="width: {p * 100}%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if p >= 0.4}
|
|
|
|
|
<div class="fade" in:fade={{duration:800}}></div>
|
|
|
|
|
<div class="fade"></div>
|
|
|
|
|
{/if}
|