<div class="frame">
  <div class="center">
		<div class="loader"></div>
  </div>
	<div class="center">
		<div class="loader-second"></div>
	</div>
	<div class="center">
		<div class="loader-third"></div>
	</div>
	<div class="center">
		<div class="loader-four"></div>
	</div>
</div>
@color-back: #fbeed7;
@color-primary: #f38181;
@color-secondary: #665c84;
@color-third: #00adb5;
@color-four: #87dfd6;
@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: #ffba5a;
  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%);
}

.loader {
    border: 10px solid @color-back;
    border-top: 10px solid @color-primary;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 4s linear infinite;
}

.loader-second {
  &:extend(.loader);
	border: 10px solid transparent;
	border-top: 10px solid @color-secondary;
	width: 100px;
	height: 100px;
	animation: spin 4s 1s linear infinite, grow 2s 4s linear forwards, spin_inverse 4s 9s infinite;
}

.loader-third {
  &:extend(.loader);
	border: 10px solid transparent;
	border-top: 10px solid @color-secondary;
	width: 100px;
	height: 100px;
	animation: spin 4s 3s linear infinite, grow 2s 4s linear forwards, spin_inverse 4s 11s infinite;
}

.loader-four {
  &:extend(.loader);
	border: 10px solid transparent;
	border-top: 10px solid @color-primary;
	width: 100px;
	height: 100px;
	animation-delay: 2s;
}

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

@keyframes grow {
	0% { 
		width: 100px;
		height: 100px;
	}
	100% { 
		width: 120px;
		height: 120px;
	}
}

@keyframes spin_inverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
// jQuery v3.3.1 is supported

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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