JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="lakismipsa_mkagem">
  <p id="kanteglom_dbutas">загрузка</p>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800,200);
body {
  background-color: #2c78ab;
}

#lakismipsa_mkagem {
  width: 195px;
  height: 195px;
  color: white;
  margin: 0 auto;
  position: absolute;
  top: 47%;
  left: 47%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 5px solid #3498db;
  border-radius: 50%;
  -webkit-animation: borderScale 1s infinite ease-in-out;
  animation: borderScale 1s infinite ease-in-out;
}

#kanteglom_dbutas {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    font-size: 2em;
    position: absolute;
    top: 35%;
    left: 50%;
    margin-right: -48%;
    transform: translate(-49%, -49%);
}

@-webkit-keyframes borderScale {
  0% {
    border: 5px solid #f5efef;
  }
  50% {
    border: 25px solid #378bc3;
  }
  100% {
    border: 5px solid #f3efef;
  }
}

@keyframes borderScale {
  0% {
    border: 5px solid #eae9e9;
  }
  50% {
    border: 25px solid #4ca0d8;
  }
  100% {
    border: 5px solid #f7f1f1;
  }
}