<div class="frame">
  <div class="center">
		<div id="square-box"></div>
  </div>
</div>
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@color-primary: #aaa;
@color-background: #333;
@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: @color-background;
  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%);
}

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	background-color: @color-background;
}

.generate-square(@number, @i: 1) when (@i =< @number) {
  #square-@{i} {
    @size: 210 - (@i * 10); 
		@color: 60 + (@i * 8);
		z-index: @i;
		width: unit(@size, px);
		height: unit(@size, px);
		border: 1px solid rgb(@color, @color, @color);
		animation: rotate_square 2s ease-in-out unit((@i / 30), s) alternate infinite;
  }
  .generate-square(@number, (@i + 1));
}

.generate-square(20);

@keyframes rotate_square {
	0% {
		transform: translate(-50%,-50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%,-50%) rotate(360deg);
	}
}
View Compiled
document.body.onload = addSquare("square-box", 20);

function addSquare(squarebox_id, size) { 
  for (var i = 1; i < size + 1; i++) {
    var newNode = document.createElement('div');
    newNode.className = 'square';
    newNode.innerHTML = '';
		newNode.setAttribute("id", "square-" + i);
    document.getElementById(squarebox_id).appendChild(newNode);   
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://100dayscss.com/codepen/js/jquery.min.js