css로 로딩 아이콘 만들어보자

간단하게 svg와 animation을 이용한 효과!

<div class="triangle">
    <svg fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M0.809017 49.5L25 1.11803L49.191 49.5H0.809017Z"
        stroke="hotpink"
        stroke-width="2"
    ></path>
    </svg>
</div>

.triangle path {
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
    animation: pathAni 5s linear infinite;
}

@keyframes pathAni {
    0% {
    stroke-dashoffset: 150; /* 150지점부터 보여줌 (안보임) */
    }

    50% {
    stroke-dashoffset: 0; /* 0부터 보여줌 (모두 보임) */
    }

    100% {
    stroke-dashoffset: -150; /* -150부터 보여줌 (반대로 그려짐) */
    }
}

<div class="loading">
	<div class="start-point"></div>
	<div class="doughnut left"></div>
	<div class="doughnut right"></div>
</div>

.loading {
	display: flex;
	height: 100px;
	width: 100px;
	animation: spin 1s infinite linear;
	position: relative;
}
.start-point {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #00dbde;
	z-index: 1;
}
.doughnut { 
	width: 50%;
	height: 100%;
	box-sizing: border-box;
	-webkit-mask:
		 linear-gradient(#fff 0 0) padding-box, 
		 linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	border: 20px solid transparent;

}
.doughnut.left {
	border-radius: 50px 0 0 50px;
	background: linear-gradient(to bottom,#00dbde 18%,#fc00ff 87%) border-box;
	border-right: none;
}
.doughnut.right {
	border-radius: 0 50px 50px 0;
	background: linear-gradient(to top,#fc00ff 13%,transparent) border-box;
	border-left: none;
}
@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}