//------------ HTML
<div class="wrapper-11">
	<div id="spinner11" class="inner-circle"></div>
</div>


//------------ CSS
.wrapper-11{
	display:flex;
    justify-content: center;
	width:50px;
	height:50px;
	margin:10px;
}

.inner-circle{
	display:inline-block;
	width:3px;
	height:3px;
	background-image:linear-gradient(35deg,
					 rgba(42, 123, 155, 1) 0%, 
					 rgba(42, 123, 155, 1) 28%, 
					 rgba(83, 237, 191, 1) 57%);
	border-radius:50%;
	margin:auto;
	animation:blowup 1.5s infinite;
}


@keyframes blowup{
	0%,100% {
		width:3px; height:3px;
		transform: rotate(0);
		animation-timing-function: linear;
  }
  50% {
		width:25px; height:25px;
		transform: rotate(180deg);
		animation-timing-function: linear;
  }
  75% {
		width:50px; height:50px;
		transform: rotate(360deg);
		animation-timing-function: linear;
  }
}