LoadingIndicator.svelte

LoadingIndicator.svelte

<script lang="ts">
	import { onMount } from 'svelte';

	export let colors: string[] = ['#FFF', '#FFF', '#541161', '#8114B0', '#9F46CE', '#FFF'];

	interface Options {
		cellWidth: number;
		cellHeight: number;
		cellCount: {
			x: number;
			y: number;
		};
		repeatCount: number | undefined;
	}

	export let opts: Options = {
		cellWidth: 8,
		cellHeight: 8,
		cellCount: {
			x: 3,
			y: 3
		},
		repeatCount: undefined
	};

	function getRandomColor() {
		return colors[Math.floor(Math.random() * colors.length)];
	}

	function getRandomOpacity() {
		return Math.random().toFixed(2);
	}

	function generateCellStyle() {
		return `
            width: ${opts.cellWidth}px; 
            height: ${opts.cellHeight}px; 
            background-color: ${getRandomColor()}; 
            opacity: ${getRandomOpacity()};
        `;
	}

	let cells = Array.from({ length: opts.cellCount.x * opts.cellCount.y }, () =>
		generateCellStyle()
	);

	let animationCount = 0; // Initialize animation count

	onMount(() => {
		const interval = setInterval(() => {
			cells = cells.map(() => generateCellStyle());

			// Check if repeat count is defined and if the animation count has reached the specified repeat count
			if (opts.repeatCount !== undefined && animationCount >= opts.repeatCount) {
				clearInterval(interval); // Stop the animation
			}

			animationCount++; // Increment animation count
		}, 400);

		return () => clearInterval(interval);
	});
</script>

<div
	class="grid"
	style="
        grid-template-columns: repeat({opts.cellCount.x}, 1fr);
		grid-template-rows: repeat({opts.cellCount.y}, 1fr);
        width: {opts.cellWidth * opts.cellCount.x}px;
        height: {opts.cellHeight * opts.cellCount.y}px;"
>
	{#each cells as cellStyle, i}
		<div style={cellStyle} class="cell"></div>
	{/each}
</div>

<style>
	.grid {
		display: grid;
		/* grid-template-columns: repeat({cellOpts.count.x}, 1fr);
		grid-template-rows: repeat({cellOpts.count.y}, 1fr); */
	}
	.cell {
		transition: all 0.45s ease-in-out;
	}
</style>