Jak zrobić animację wczytywania w CSS?

Aby stworzyć animację wczytywania (tzw. „loading animation”) w CSS, możesz skorzystać z animacji kluczowych (keyframes) oraz odpowiednich właściwości CSS, takich jak transform czy opacity. Przykład prostego kółka wczytywania (spinnera) może wyglądać tak:

Przykład 1: Animacja obracającego się kółka (spinner)

HTML:

<div class="spinner"></div>

CSS:

.spinner {
  width: 50px;
  height: 50px;
  border: 8px solid #f3f3f3; /* Lekki kolor na zewnątrz */
  border-top: 8px solid #3498db; /* Mocniejszy kolor na górze */
  border-radius: 50%; /* Aby stworzyć kształt kółka */
  animation: spin 2s linear infinite; /* Zastosowanie animacji */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Tak będzie to wyglądać:

Jak to działa:

.spinner: To div, który ma szerokość, wysokość oraz krawędzie (border) ustawione w taki sposób, aby wyglądał jak kółko.
@keyframes spin: Definiuje animację, w której element obraca się od 0 do 360 stopni. Animacja trwa 2 sekundy i powtarza się w nieskończoność.
border-radius: 50%: Ustawienie tego stylu tworzy okrągły kształt.

Przykład 2: Kropki migające jedna po drugiej

HTML:

<div class="loading-dots">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS:

.loading-dots {
  display: flex;
  justify-content: space-around;
  width: 100px;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.5s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

Wygląd animacji:

Jak to działa:

.loading-dots: To kontener, który zawiera trzy kropki. display: flex oraz justify-content: space-around sprawiają, że kropki są rozmieszczone równomiernie.
.dot: Każda kropka jest okrągłym elementem, dzięki border-radius: 50%.
@keyframes bounce: Animacja powoduje, że kropki podskakują w górę i w dół.
animation-delay: Każda kropka zaczyna animację z opóźnieniem, co daje efekt „przechodzącego” ruchu.