.jgb_spinner-dots-circle {
	width: 1em;
	height: 1em;
	position: relative;

	>div {
		background-color: initial;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;

		&:before {
			content: "";
			display: block;
			margin: 0 auto;
			width: 20%;
			height: 20%;
			background-color: currentColor;
			border-radius: 100%;
			animation: jgb_spinner-dots-circle-animation 1.2s infinite ease-in-out;
			animation-fill-mode: both;
		}

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

			&:before {
				animation-delay: -1.1s;
			}
		}

		&:nth-child(3) {
			transform: rotate(60deg);

			&:before {
				animation-delay: -1s;
			}
		}

		&:nth-child(4) {
			transform: rotate(90deg);

			&:before {
				animation-delay: -.9s;
			}
		}

		&:nth-child(5) {
			transform: rotate(120deg);

			&:before {
				animation-delay: -.8s;
			}
		}

		&:nth-child(6) {
			transform: rotate(150deg);

			&:before {
				animation-delay: -.7s;
			}
		}

		&:nth-child(7) {
			transform: rotate(180deg);

			&:before {
				animation-delay: -.6s;
			}
		}

		&:nth-child(8) {
			transform: rotate(210deg);

			&:before {
				animation-delay: -.5s;
			}
		}

		&:nth-child(9) {
			transform: rotate(240deg);

			&:before {
				animation-delay: -.4s;
			}
		}

		&:nth-child(10) {
			transform: rotate(270deg);

			&:before {
				animation-delay: -.3s;
			}
		}

		&:nth-child(11) {
			transform: rotate(300deg);

			&:before {
				animation-delay: -.2s;
			}
		}

		&:nth-child(12) {
			transform: rotate(330deg);

			&:before {
				animation-delay: -.1s;
			}
		}
	}
}

@keyframes jgb_spinner-dots-circle-animation {

	0%,
	80%,
	to {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}