revite/src/components/ui/Preloader.tsx

import styled, { keyframes } from "styled-components";

const skSpinner = keyframes`
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
`;

const prRing = keyframes`
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
`;

const PreloaderBase = styled.div`
	width: 100%;
	height: 100%;

	display: grid;
	place-items: center;

	.spinner {
		width: 58px;
		display: flex;
		text-align: center;
		margin: 100px auto 0;
		justify-content: space-between;
	}

	.spinner > div {
		width: 14px;
		height: 14px;
		background-color: var(--tertiary-foreground);

		border-radius: 100%;
		display: inline-block;
		animation: ${skSpinner} 1.4s infinite ease-in-out both;
	}

	.spinner div:nth-child(1) {
		animation-delay: -0.32s;
	}

	.spinner div:nth-child(2) {
		animation-delay: -0.16s;
	}

	.ring {
		display: inline-block;
		position: relative;
		width: 48px;
		height: 52px;
	}

	.ring div {
		width: 32px;
		margin: 8px;
		height: 32px;
		display: block;
		position: absolute;
		border-radius: 50%;
		box-sizing: border-box;
		border: 2px solid #fff;
		animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		border-color: #fff transparent transparent transparent;
	}

	.ring div:nth-child(1) {
		animation-delay: -0.45s;
	}

	.ring div:nth-child(2) {
		animation-delay: -0.3s;
	}

	.ring div:nth-child(3) {
		animation-delay: -0.15s;
	}
`;

interface Props {
	type: "spinner" | "ring";
}

export default function Preloader({ type }: Props) {
	return (
		<PreloaderBase>
			<div class={type}>
				<div />
				<div />
				<div />
			</div>
		</PreloaderBase>
	);
}