compositing spinner

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.html

<ouroboros-spinner>
	<span></span>
	<span></span>
</ouroboros-spinner>

script.js

‎‎​

style.scss

$stroke: 2.5px;
// $stroke: 5px;

body {
	font-size: 20px;
}

ouroboros-spinner {
	position: relative;
	isolation: isolate;
	display: block;
	height: 1em;
	width: 1em;
	animation: spin 850ms linear infinite;

	span {
		overflow: hidden;
		position: absolute;
		height: 100%;
		width: 50%;

		&::after {
			content: '';
			display: block;
			box-sizing: border-box;
			height: 100%;
			width: 200%;
			border-radius: 50%;
			border: #{$stroke} solid currentColor;

			animation-duration: 4s;
			animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1);
			animation-iteration-count: infinite;
		}

		&:first-child {
			left: 0;

			&::after {
				border-right-color: transparent;
				border-top-color: transparent;
				animation-name: left-swing;
			}
		}

		&:last-child {
			right: 0;
			transform: rotate(180deg);

			&::after {
				border-left-color: transparent;
				border-bottom-color: transparent;
				animation-name: right-swing;
			}
		}
	}
}

@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}

@keyframes left-swing {
	$start: 270deg;
	0% {
		transform: rotate(#{$start});
	}
	50% {
		transform: rotate(#{$start + 100deg});
	}
	100% {
		transform: rotate(#{$start});
	}
}

@keyframes right-swing {
	$start: 0deg;
	0% {
		transform: rotate(#{$start});
	}
	50% {
		transform: rotate(#{$start - 100deg});
	}
	100% {
		transform: rotate(#{$start});
	}
}