daviirodrig/twitch-spinner-loading.html

## twitch-spinner-loading.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spin</title>
    <style>
        html,
        body {
            height: 100%;
            /* background-color: yellow; */
        }
        :root {
            --spinner-color: #fff;
            --spinner-out: rgba(83, 83, 95, 0.48);
        }

        .spin-container {
            opacity: 0;
            animation-name: opac;
            animation-iteration-count: 1;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
            animation-duration: 150ms;
            animation-delay: 300ms;
        }

        .spinner {
            position: relative;
            transform: translateZ(0px);
            animation-name: spinAnimate;
            animation-iteration-count: infinite;
            animation-duration: 1s;
            animation-timing-function: linear;
            width: 2.8rem;
            height: 2.8rem;
            border-style: solid;
            border-top-color: var(--spinner-out);
            border-right-color: var(--spinner-out);
            border-bottom-color: var(--spinner-out);
            border-left-color: var(--spinner-color);
            border-radius: 50%;
        }

        @keyframes spinAnimate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes opac {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        #container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="centered">
            <div class="spin-container">
                <div class="spinner"></div>
            </div>
        </div>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Spin</title>
	<style>
	html,
	body {
	height: 100%;
	/* background-color: yellow; */
	}
	:root {
	--spinner-color: #fff;
	--spinner-out: rgba(83, 83, 95, 0.48);
	}

	.spin-container {
	opacity: 0;
	animation-name: opac;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-duration: 150ms;
	animation-delay: 300ms;
	}

	.spinner {
	position: relative;
	transform: translateZ(0px);
	animation-name: spinAnimate;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-timing-function: linear;
	width: 2.8rem;
	height: 2.8rem;
	border-style: solid;
	border-top-color: var(--spinner-out);
	border-right-color: var(--spinner-out);
	border-bottom-color: var(--spinner-out);
	border-left-color: var(--spinner-color);
	border-radius: 50%;
	}

	@keyframes spinAnimate {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}

	@keyframes opac {
	0% {
	opacity: 0;
	}

	100% {
	opacity: 1;
	}
	}

	#container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	}
	</style>
	</head>

	<body>
	<div id="container">
	<div id="centered">
	<div class="spin-container">
	<div class="spinner"></div>
	</div>
	</div>
	</div>
	</body>

	</html>