<div class="frame">
	<h3>Using scss Loops</h3>
  <div class="center">
		<div class="box box-1"></div>
		<div class="box box-2"></div>
		<div class="box box-3"></div>
		<div class="box box-4"></div>
		<div class="box box-5"></div>
		<div class="box box-6"></div>
		<div class="box box-7"></div>
		<div class="box box-8"></div>
		<div class="box box-9"></div>
		<div class="box box-10"></div>
		<div class="box box-11"></div>
		<div class="box box-12"></div>
		<div class="box box-13"></div>
		<div class="box box-14"></div>
		<div class="box box-15"></div>
		<div class="box box-16"></div>
		<div class="box box-17"></div>
		<div class="box box-18"></div>
		<div class="box box-19"></div>
		<div class="box box-20"></div>
  </div>
</div>

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
	background: #222;
	color: #333;
	font-family: "Open Sans", Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	left: 50%;
}
h3 {
	color: #fff;
	text-align: center;
}
.box {
	border: 1px solid #fff;
	position: Absolute;
	animation: box-rotate 2s ease-in-out infinite alternate;
}

@for $i from 1 through 20 {
	.box-#{$i} {
		width: 10px * $i;
		height: 10px * $i;
		animation-delay: 0.03333333333333s * $i;
	}
}

@keyframes box-rotate {
	100% {
		transform: rotate(360deg);
	}
}

// jQuery v3.3.1 is supported