.p5-ring-wrap {
	text-align: center;
	vertical-align: middle;
	&.p5-ring-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.p5-ring-circle {
	display: inline-block;
	width: 25px;
	height: 25px;
	border: 2px solid $color;
	border-right: none;
	border-bottom-color: transparent;
	border-radius: 50%;
	animation: rotate 0.75s 0s linear infinite;
}

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

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.p5-ring-fill {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: $color;
	animation: scale 1s 0s ease-in-out infinite;
}

@keyframes scale {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
		opacity: 0;
	}
}