Twórz piękne programy ładujące CSS

Generuj niestandardowe animacje ładowania CSS w kilka sekund dzięki naszemu intuicyjnemu interfejsowi typu "przeciągnij i upuść". Nie wymaga kodowania!

Dostosuj swój ładowacz

Typ ładowarki

Color

Size 40px

Speed 1s

Opcje zaawansowane

Preview

.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #165DFF; width: 40px; height: 40px; animation: spin 1s linear infinite; }  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Sposób użycia

Dostosuj swoją ładowarkę za pomocą elementów sterujących po lewej stronie
Kliknij przycisk "Generuj CSS"
Skopiuj wygenerowany kod HTML i CSS
Wklej go do swojego projektu

Popularne przykłady ładowarek

Ładowarka impulsów

3 Dots Łatwe do wdrożenia

Ładowarka obrotowa

Classic 100% CSS

Dual Ring

Podwójny okrąg Nowoczesny styl

Ładowarka odbijająca

Odbijające się kropki Płynna animacja

Ładowarka pierścieniowa

Pierścionek z kropką Unikalny design

Ładowarka wagi

Skalowanie kropek Lightweight

Jak korzystać z programów ładujących CSS

Podstawowa implementacja

Korzystanie z programów ładujących CSS generowanych przez to narzędzie jest proste. Po prostu skopiuj wygenerowany kod HTML i CSS do swojego projektu.

Krok 1: Dodaj CSS

Add the generated CSS code to your stylesheet or in a