.cl-loading {
	display: inline-block;
	line-height: 1;

	@keyframes loading-rotate {
		0% {
			transform: rotate(0);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	&__inner {
		height: 100%;
		width: 100%;
		border-radius: 100%;
		border-style: solid;
		box-sizing: border-box;
		animation: loading-rotate 1s linear infinite;
		color: $cl-color-primary;
	}

	&--spin {
		position: relative;
		animation: loading-rotate 2s linear infinite;
	}

	&__spin {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;

		&-item {
			background-color: currentColor;
			position: absolute;
			border-radius: 5px;
			color: $cl-color-primary;
		}

		&:nth-child(2) {
			transform: rotate(45deg);
		}
	}
}