Maak prachtige CSS-laders

Genereer binnen enkele seconden aangepaste CSS-laadanimaties met onze intuïtieve interface voor slepen en neerzetten. Geen codering vereist!

Pas uw lader aan

Type lader

Color

Size 40px

Speed 1s

Geavanceerde opties

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); } }

Gebruiksaanwijzing

Pas uw lader aan met behulp van de bedieningselementen aan de linkerkant
Klik op de knop "CSS genereren"
Kopieer de gegenereerde HTML- en CSS-code
Plak het in uw project

Voorbeelden van populaire laders

Puls lader

3 Dots Eenvoudig te implementeren

Spinner lader

Classic 100% CSS

Dual Ring

Dubbele cirkel Moderne stijl

Bounce Lader

Stuiterende stippen Vloeiende animatie

Ring lader

Ring met stip Uniek ontwerp

Schaal lader

Stippen schalen Lightweight

Hoe CSS-laders te gebruiken

Basis implementatie

Het gebruik van de CSS-laders die door deze tool worden gegenereerd, is eenvoudig. Kopieer eenvoudig de gegenereerde HTML- en CSS-code naar uw project.

Stap 1: Voeg de CSS toe

Add the generated CSS code to your stylesheet or in a