https://stackoverflow.com/questions/66737093/wrap-dynamic-text-around-a-spinning-cylinder-with-css-javascript-splitting-js

https://github.com/nadimshah008/circulartextrotatingjavascript

https://www.loadergallery.com/

https://css-loaders.com/

개인적으로 로딩gif 이미지가 기어두개 돌아가는게 마음에 드는데

저작권 문제가 불확실해서

찾아보니 이런게 있더군요.

클래스 비슷한 형태는 복잡해서 함수형태로 만들었습니다.

css 만으로도 가능하지만 여러개를 동시에 사용할때는 css 를 여러개 만들어야 합니다.

개인적으로 사용하는데는 큰 불편함이 없는데 

남이 만든거는 100% 마음에 들기 힘듭니다.

각자 취향대로 수정해서 사용하시면 됩니다.

.spinner-body {
	color: official;
	display: inline-block;
	position: relative;
	height: 60px;
	width: 60px;
	background-color:#ddd;
}

	function spinner(spinner_body_id, spinner_cnt=0, spinner_duration=1200) {			
		var spinner_body = document.getElementById(spinner_body_id);

		var spinner_cnt = spinner_cnt ? spinner_cnt : (spinner_duration / 100) * 2;

		var delay_step = spinner_duration / spinner_cnt;
		var delay = 0 - (delay_step * spinner_cnt);
		var deg = 360 / spinner_cnt;

		for ( var i = 0; i < spinner_cnt; i++ ) {
			var spinnerdiv = document.createElement('div');
			spinnerdiv.style.transform = "rotate(" + i*deg + "deg)";
			spinnerdiv.style.transformOrigin  = "30px 30px";

			var span = document.createElement('span');
			span.innerHTML = " ";
			span.style.display = "block";
			span.style.position = "absolute";
			span.style.top = "1px";
			span.style.left = "29px";
			span.style.width = "3px";
			span.style.height = "12px";
			span.style.borderRadius = "20%";
			span.style.background = "#1043A0";
			spinnerdiv.appendChild(span);

			var keyframes = [
				{opacity: 1},
				{opacity: 0}
			];
			var options = {
				delay: delay,
				duration: spinner_duration,
				easing: "linear",
				iterations: Infinity
			};
			spinnerdiv.animate(keyframes, options);

			spinner_body.appendChild(spinnerdiv);
			delay += delay_step;
		}	
	}

		<div id="spinner-body" class="spinner-body">