opal-components/src/components/opal-loader/index.css

[Rionite](https://github.com/Riim/Rionite) component set.

@component OpalLoader {
	position: relative;
	display: none;
	margin: auto;
	width: 38px;
	height: 38px;
	border: 15px solid transparent;
	background: rgba(255,255,255,.5);

	&::before,
	&::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		margin: auto;
		width: 100%;
		height: 100%;
		border: 3px solid hsl(208,94%,54%);
		border-top-color: transparent;
		border-radius: 50%;
		content: '';
		animation: OpalLoader__animation 1.2s infinite linear;
	}

	&::after {
		width: 26px;
		height: 26px;
		border-color: hsl(348,92%,58%);
		border-bottom-color: transparent;
		animation-direction: reverse;
	}

	@mod size=s {
		width: 18px;
		height: 18px;
		border-width: 6px;

		&::before {
			border-width: 2px;
		}

		&::after {
			content: none;
		}
	}

	@mod shown {
		display: block;
	}
}

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