<style>

.loading {
	position: relative;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	margin: 3px;
	color: transparent;
	background-color: var(--color);
}

@keyframes ClipPath {
	0%   { -webkit-clip-path: polygon(              0                0,  100%               0,  100%    2px,                0   2px); }
	12%  { -webkit-clip-path: polygon(             50%               0,  100%               0,  100%   50%,               50%  50%); }
	25%  { -webkit-clip-path: polygon(calc(100% - 2px)               0,  100%               0,  100%  100%,  calc(100% - 2px) 100%); }
	38%  { -webkit-clip-path: polygon(             50%              50%, 100%              50%, 100%  100%,               50% 100%); }
	50%  { -webkit-clip-path: polygon(              0  calc(100% - 2px), 100% calc(100% - 2px), 100%  100%,                 0 100%); }
	62%  { -webkit-clip-path: polygon(              0               50%,  50%              50%,  50%  100%,                 0 100%); }
	75%  { -webkit-clip-path: polygon(              0                0,    2px              0,    2px 100%,                 0 100%); }
	88%  { -webkit-clip-path: polygon(              0                0,   50%               0,   50%   50%,                 0  50%); }
	100% { -webkit-clip-path: polygon(              0                0,  100%               0,  100%    2px,                0   2px); }
}

.loading::before,
.loading::after {
	position: absolute;
	top: -2px;
	right: -2px;
	bottom: -2px;
	left: -2px;
	content: "";
	border: 2px solid var(--color);
	animation: ClipPath 8s linear infinite;
}

.loading::after {
	animation-delay: -4s;
}

</style>

<div class="loading" style="--color: red; background-color: white;"></div>