Ostatnio używane

    Po otwarciu narzędzia pojawi się ono tutaj.

    Kreator pasków postępu

    Projektowanie animowanych pasków postępu

    Udostępnij to narzędzie

    Zgłoś problem

    Problem należy opisać bez podawania prywatnych danych ani plików.

    Jak przydatne było to narzędzie?

    Jak przydatne było to narzędzie?

    Zaprojektuj pasek postępu

    Wybierz kształt i motyw, a potem dopracuj szczegóły.

    Szybkie motywy
    Więcej ustawień
    Wymiary i kształt
    Kolory i gradient
    Ustawienia obramowania
    Etykiety
    Animacja i efekty

    Podgląd i kod

    Tło podglądu

    Podgląd dopasowuje się do tego panelu. Wymiary eksportu i kod zachowują wybrany rozmiar.

    Podgląd zaktualizowany. Skopiuj HTML i CSS do swojego projektu.

    Podgląd eksportu PNG

    PNG to statyczny obraz na białym tle. Używa oryginalnego stylu canvas: gradienty i obramowania są stosowane tylko w paskach liniowych, a poświata CSS, paski, pulsowanie i przejścia są dostępne w podglądzie na żywo i w kodzie.

    Znaczniki HTML
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    Ładowanie... 65%
  </div>
</div>
    Style CSS
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTML i CSS tworzą całość. Opisują tę stałą wartość, a aktualizację postępu i semantykę dostępności należy podłączyć w swojej aplikacji.

    Szybkie wskazówki
    • Liniowy: wskaźniki ładowania i wysyłanie plików.
    • Kołowy: mierniki i przedstawienie umiejętności.
    • Półkolisty: wskaźniki na pulpicie i wykorzystanie limitu.
    • Pionowy: wskaźniki baterii i pamięci.
    • Kropki: paginacja i postęp w sekwencji.
    • Krokowy: kamienie milowe w procesach wieloetapowych.

    O narzędziu Kreator pasków postępu, darmowy generator pasków postępu CSS

    Projektuj efektowne, animowane paski postępu z konfigurowalnymi kolorami, etykietami i efektami. Skopiuj razem HTML i CSS albo wyeksportuj statyczny plik PNG w wybranych wymiarach. Dostępnych jest sześć kształtów, sześć motywów i trzy krzywe przejść. PNG powstaje w osobnym rendererze canvas: gradienty i obramowania są stosowane tylko w paskach liniowych, a animacja CSS, paski ukośne i poświata nie są uwzględniane. Sprawdź wynik w docelowym układzie, zanim zintegrujesz ten generator pasków postępu dostępny online.

    Wskaźniki postępu to podstawowy wzorzec interfejsu we współczesnym projektowaniu stron i aplikacji mobilnych. Informują użytkowników o stanie ładowania, ukończeniu zadania, poziomie umiejętności i osiągnięciu celu. Zamiast pisać CSS od zera, skorzystaj z naszego edytora wizualnego, aby skonfigurować każdy szczegół: kolory, zaokrąglenie narożników, paski, gradienty i etykiety, a następnie skopiuj wygenerowany kod prosto do projektu.

    Narzędzie oferuje podgląd na żywo obok podglądu eksportu canvas, więc dokładnie widać, jak będzie wyglądał pasek postępu, zanim go zatwierdzisz. Niezależnie od tego, czy tworzysz wskaźnik na pulpicie, wskaźnik wysyłania pliku, wieloetapowy kreator, czy znacznik paginacji z kropek, Kreator pasków postępu ma odpowiedni styl i czysty kod.

    Projektowanie

    Ostatnio dodane

    Wszystkie narzędzia

    Ustawienia prywatności

    Wybierz preferencje dotyczące analityki, reklam i personalizacji. Niezbędne przechowywanie danych zapewnia działanie takich funkcji jak motyw i zapisane narzędzia.

    Niezbędne przechowywanie danych jest zawsze włączone.