Вот несколько способов создания анимации загрузчика круга CSS:

1. Использование ключевых кадров CSS:

   <style>
    .loader {
      border: 16px solid #f3f3f3;
      border-top: 16px solid #3498db;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
   </style>
   <div class="loader"></div>

2. Использование CSS-преобразования и анимации:

   <style>
    .loader {
      border: 16px solid #f3f3f3;
      border-top: 16px solid #3498db;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
   </style>
   <div class="loader"></div>

3. Использование CSS-анимации и задержки:

   <style>
    .loader {
      border: 16px solid #f3f3f3;
      border-top: 16px solid #3498db;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      animation-delay: 1s;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
   </style>
   <div class="loader"></div>

4. Использование CSS-анимации и нескольких слоев:

   «»;
   позиция: абсолютная;
   граница: 16 пикселей сплошная прозрачная;
   граница-топ-цвет: #3498db;
   граница-радиус: 50%;
   ширина: 100 %;
   высота: 100%;
   анимация: вращение 2 с, линейная бесконечность;
   
   .loader:before {
   z-index: 2;
   анимация-задержка: 0 с;
   
   .loader:after {
   z-index: 1;
   анимация-задержка: 1 с;
   
   @keyframes spin {
   0% { Transform: Rotate (0град);
   100% { Transform: Rotate(360deg);