Skapa vackra CSS-lastare

Generera anpassade CSS-laddningsanimationer på några sekunder med vårt intuitiva dra-och-släpp-gränssnitt. Ingen kodning krävs!

Anpassa din lastare

Typ av lastare

Color

Size 40px

Speed 1s

Avancerade alternativ

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

Så här använder du

Anpassa din lastare med hjälp av kontrollerna till vänster
Klicka på knappen "Generera CSS".
Kopiera den genererade HTML- och CSS-koden
Klistra in den i ditt projekt

Populära exempel på lastare

Puls lastare

3 Dots Lätt att implementera

Spinner Lastare

Classic 100% CSS

Dual Ring

Dubbel cirkel Modern stil

studsa lastare

Studsande prickar Smidig animering

Ringlastare

Ring med prick Unik design

Skala lastare

Skala punkter Lightweight

Hur man använder CSS-lastare

Grundläggande implementering

Det är enkelt att använda CSS-lastarna som genereras av det här verktyget. Kopiera helt enkelt den genererade HTML- och CSS-koden till ditt projekt.

Steg 1: Lägg till CSS

Add the generated CSS code to your stylesheet or in a