<div class="container">
  <div class="circle"></div>
</div>

@keyframe loading {
  0%   {opacity: 0.9; right: 0px; top: 0px;}
  25%  {opacity: 0.7; right: 50px; top: 50px;}
  50%  {opacity: 0.5; right: 0px; top: 50px;}
  75%  {opacity: 0.3; right: 50px; top: 0px;}
  100% {opacity: 0.1; right: 0px; top: 0px;}
}

@-webkit-keyframes loading {
  0%   {opacity: 0.9; right: 0px; top: 0px;}
  25%  {opacity: 0.7; right: 50px; top: 50px;}
  50%  {opacity: 0.5; right: 0px; top: 50px;}
  75%  {opacity: 0.3; right: 50px; top: 0px;}
  100% {opacity: 0.1; right: 0px; top: 0px;}
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  background-color: #DE0E42;
  animation-name: loading;
  opacity: 1;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: 10;
}

.container{
  width: 100wv;
  display: flex; 
  align-items: center;
  justify-content: center;
}