Generator loaderów CSS

Czym jest Generator loaderów CSS?

Generator loaderów CSS to darmowe narzędzie działające w przeglądarce dla projektantów stron i programistów front-end, którzy potrzebują wskaźnika ładowania w czystym CSS bez dołączania biblioteki. Wybierz spośród pięciu stylów - spinner, pierścień, kropki, paski i pulsowanie - a następnie kontroluj rozmiar w pikselach, kolor główny, szybkość jednego cyklu animacji w sekundach, grubość linii oraz liczbę kropek lub pasków. Podgląd na żywo animuje się podczas edycji, a odpowiadający mu kod HTML wraz z blokiem stylu CSS z @keyframes aktualizuje się natychmiast, więc możesz go wstawić bezpośrednio na stronę. Użyj go do przycisków, loaderów strony, stanów szkieletowych i asynchronicznych symboli zastępczych albo by nauczyć się, jak animacja CSS i @keyframes napędzają każdy efekt.

Jak używać Generator loaderów CSS

1. Wybierz styl loadera: Spinner, Pierścień, Kropki, Paski lub Pulsowanie.
2. Ustaw rozmiar w pikselach i wybierz kolor za pomocą próbki lub wpisując wartość.
3. Ustaw szybkość animacji w sekundach dla jednego pełnego cyklu.
4. Otwórz Ustawienia, aby dostosować grubość linii (spinner i pierścień) lub liczbę kropek albo pasków.
5. Obserwuj animację podglądu na żywo, a następnie skopiuj wygenerowany kod HTML i CSS przyciskiem kopiowania.

Przykłady

Styl: Spinner, rozmiar 48px, kolor #4f86f7, szybkość 1s, grubość 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Styl: Kropki, rozmiar 48px, kolor #9333ea, szybkość 1s, liczba 3

<div class="dd-loader"><div></div><div></div><div></div></div> ze stopniowanym animation-delay, dzięki czemu kropki skalują się falą.

Najczęściej zadawane pytania

Jakie style loadera są dostępne?

Pięć: Spinner (obracający się łuk), Pierścień (grubszy obracający się pierścień), Kropki (kropki skalujące się falą), Paski (paski rozciągające się w górę i w dół) oraz Pulsowanie (pojedyncze pulsujące kółko). Przełączaj za pomocą menu stylu, a podgląd i kod aktualizują się natychmiast.

Co robią ustawienia rozmiaru, koloru i szybkości?

Rozmiar określa wymiary loadera w pikselach, kolor ustawia kolor główny (użyj próbnika lub wpisz dowolny kolor CSS), a szybkość to czas trwania jednego cyklu animacji w sekundach. Grubość kontroluje linię spinnera i pierścienia, natomiast liczba kontroluje, ile kropek lub pasków się pojawia.

Czy wygenerowany CSS to czysty CSS bez JavaScriptu?

Tak. Fragment to zwykły HTML plus blok <style> używający animacji CSS i @keyframes, więc działa bez żadnego JavaScriptu ani zewnętrznej biblioteki. Wklej go na swoją stronę, a zadziała samodzielnie.

Dlaczego grubość i liczba nie zmieniają każdego stylu?

Grubość wpływa tylko na spinner i pierścień (które rysują obramowanie), a liczba wpływa tylko na kropki i paski (które renderują wiele elementów). Pozostałe style je ignorują, więc wynik pozostaje czysty dla wybranego stylu.

Czy cokolwiek jest wysyłane na serwer?

Nie. Loader i jego CSS są budowane w całości w Twojej przeglądarce za pomocą lokalnych obliczeń na łańcuchach znaków - żadne ustawienia, kolory ani kod nigdy nie są wysyłane na serwer, więc działa offline i zachowuje prywatność Twojej pracy.