@keyframes rotate {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(360deg); }
	100% { transform: rotate(720deg); }
}

@keyframes prixClipFix {
	0%, 100% {
		clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0);
	}
	25%, 63% {
		clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0);
	}
	37%, 50% {
		clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%);
	}
}

.taf > .window-content span {
	&.loader {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		position: relative;
		animation: rotate 2s linear infinite;
		display: block;

		&::before, &::after {
			content: "";
			box-sizing: border-box;
			position: absolute;
			inset: 0px;
			border-radius: 50%;
			border: 5px solid #FFF;
			animation: prixClipFix 4s linear infinite;
		}

		&::after{
			inset: 8px;
			transform: rotate3d(90, 90, 0, 180deg );
			border-color: #FF3D00; /* This can be the user colour */
		}
	}
}