<script>
    import {fade} from 'svelte/transition';

    export let show = true;
    export let size = '72px';
</script>

<style lang="scss">
	.loader {
		position: fixed;
		z-index: 10000;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;

		display: flex;
		justify-content: center;
		align-items: center;

		background: var(--background-color);

		.parts {
			--size: 72px;
			position: relative;
			width: var(--size);
			height: var(--size);

			.bg-circle {
				opacity: 0.5;
			}

			.fg-arc {
				border-top: 8px solid transparent;
				border-left: 8px solid transparent;
				border-bottom: 8px solid transparent;

				animation: infinite linear 2s spin;
			}

			> * {
				position: absolute;
				width: 100%;
				height: 100%;

				border: 8px solid #fff;
				border-radius: 100%;
			}
		}
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>

{#if show}
    <div class="loader" style="--size: {size};" transition:fade={{duration: 50}}>
        <div class="parts">
            <div class="bg-circle"></div>
            <div class="fg-arc"></div>
        </div>
    </div>
{/if}