body{
  background-color: #d3d3d3;
}
#preloader-frame{
  max-width: 1024px;
  height: 460px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  left: calc(50% - 50px);
  top: 30px;
}
#preloader{
  width: 100px;
  height: 100px;
  background: conic-gradient(from 0deg, #d3d3d3, #5c5c5c);
  display: block;
  clip-path: url("#circle");
  border-radius: 100px;
  position: relative;
  transform: rotateZ(0deg);
  transition: 1s ease-in;
  animation: Preloader 3s linear infinite;
}
#preloader::after{
  content: "";
  width: 80px;
  height: 80px;
  background-color: #d3d3d3;
  position: absolute;
  border-radius: 100px;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
}
#preloader-text{
  position: relative;
}
#loading{
  position: absolute;
  left: calc(50% - 35px);
  top: calc(50% - 9px);
  z-index: 1;
}
#loading::after{
  content: "Загрузка...";
  animation: Text 2s linear infinite;
}
@keyframes Preloader{
  0%{transform: rotateZ(0deg)}
  100%{transform: rotateZ(360deg)}
}
@keyframes Text{
  0%{content: "Загрузка."}
  50%{content: "Загрузка.."}
  100%{content: "Загрузка..."}
}