body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: black;
}

.loader-cont {
	height: 480px;
	width: 480px;
	position: relative;
}

.dots {
	height: 100%;
	width: 100%;
	border-radius: 50%;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.dots > span {
	content: '';
	display: block;
	height: 20px;
	width: 20px;
	background: white;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.dots:nth-child(2) > span {
	top: calc(20px * 1);
}

.dots:nth-child(3) > span {
	top: calc(20px * 2);
}

.dots:nth-child(4) > span {
	top: calc(20px * 3);
}

.dots:nth-child(5) > span {
	top: calc(20px * 4);
}

.dots:nth-child(6) > span {
	top: calc(20px * 5);
}

.dots:nth-child(7) > span {
	top: calc(20px * 6);
}

.dots:nth-child(8) > span {
	top: calc(20px * 7);
}

.dots:nth-child(9) > span {
	top: calc(20px * 8);
}

.dots:nth-child(10) > span {
	top: calc(20px * 9);
}

.dots:nth-child(11) > span {
	top: calc(20px * 10);
}

.dots:nth-child(12) > span {
	top: calc(20px * 11);
}