daanta-real/gist:1d0c5230630c85e2720c7fe9ab0c7568

## gistfile1.html
<!--
I made this to use spinner with the simplest way and with reduced code.

Usage → Simple
① CSS code → Edit the size/color in :root{} and paste all to ur page.
② HTML → Just type <div class="spinner"></div> at the location u want.
③ Want to turn on the spinner? just add ".loading" class to the spinner element.
  Want to turn off? remove ".loading" class.

Done. That's all.
-->

<!DOCTYPE html>
<html>
    <head>
        <style type='text/css'>
            @keyframes spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
            :root { --spinner-size: 7rem; --spinner-color: #f19022; }
            .spinner { position:relative; width:var(--spinner-size); height:var(--spinner-size); display:none; }
            .spinner.loading { display:block; }
            .spinner.loading:after {
                content:""; position: absolute; width:var(--spinner-size); height:var(--spinner-size);
                border-width: calc(var(--spinner-size) / 6); border-style: solid; border-color: transparent;
                border-top-color: var(--spinner-color); border-bottom-color: var(--spinner-color);
                border-radius: 50%; box-sizing: border-box;
                animation: spinner 0.8s ease infinite;
            }
        </style>
        <script type='text/javascript'>

            window.onload = () => {
                window.el = document.querySelector("body > div.spinner");
                window.btn = document.querySelector("input");
                window.power = false;
            }

            function toggle() {
                if(!power) el.classList.add("loading");
                else       el.classList.remove("loading");
                power = !power;
                btn.value = power;
            }

        </script>
    </head>
    <body>
        <div class="spinner"></div>
        <input type=button onclick="toggle()" value=toggle style="position:absolute; top:300px; left:400px;"/>
    </body>
</html>
	<!--
	I made this to use spinner with the simplest way and with reduced code.

	Usage → Simple
	① CSS code → Edit the size/color in :root{} and paste all to ur page.
	② HTML → Just type <div class="spinner"></div> at the location u want.
	③ Want to turn on the spinner? just add ".loading" class to the spinner element.
	Want to turn off? remove ".loading" class.

	Done. That's all.
	-->

	<!DOCTYPE html>
	<html>
	<head>
	<style type='text/css'>
	@keyframes spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
	:root { --spinner-size: 7rem; --spinner-color: #f19022; }
	.spinner { position:relative; width:var(--spinner-size); height:var(--spinner-size); display:none; }
	.spinner.loading { display:block; }
	.spinner.loading:after {
	content:""; position: absolute; width:var(--spinner-size); height:var(--spinner-size);
	border-width: calc(var(--spinner-size) / 6); border-style: solid; border-color: transparent;
	border-top-color: var(--spinner-color); border-bottom-color: var(--spinner-color);
	border-radius: 50%; box-sizing: border-box;
	animation: spinner 0.8s ease infinite;
	}
	</style>
	<script type='text/javascript'>

	window.onload = () => {
	window.el = document.querySelector("body > div.spinner");
	window.btn = document.querySelector("input");
	window.power = false;
	}

	function toggle() {
	if(!power) el.classList.add("loading");
	else el.classList.remove("loading");
	power = !power;
	btn.value = power;
	}

	</script>
	</head>
	<body>
	<div class="spinner"></div>
	<input type=button onclick="toggle()" value=toggle style="position:absolute; top:300px; left:400px;"/>
	</body>
	</html>