Generator Progress Bar / Skill Bar
Twórz animowane paski postępu i skill bary do projektowania stron internetowych. Poziome, kołowe, półkole, pionowe — eksport HTML + CSS + JS z IntersectionObserver.
Moje umiejętności
Stack technologiczny w projektowaniu stron internetowych
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar / Skill Bar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* ── Progress Bar / Skill Bar ── */
.skills-section {
background: #0a0a0a;
padding: 40px 32px;
font-family: 'Oswald', sans-serif;
max-width: 700px;
margin: 0 auto;
}
.skills-title {
color: #f9fafb;
font-size: 28px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
margin: 0 0 6px;
}
.skills-subtitle {
color: #9ca3af;
font-size: 15px;
text-align: center;
margin: 0 0 28px;
}
.skill-item { margin-bottom: 16px; }
.skill-label-above {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.skill-row { display: flex; align-items: center; gap: 10px; }
.skill-label {
min-width: 140px;
display: flex;
align-items: center;
gap: 6px;
color: #f9fafb;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.skill-icon { font-size: 14px; }
.skill-track {
flex: 1;
height: 20px;
background: #262626;
border-radius: 9999px;
overflow: hidden;
position: relative;
}
.skill-fill {
height: 100%;
border-radius: 9999px;
width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 6px;
transition: width 1200ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.skill-fill.animated {
/* width set by JS */
}
.skill-pct-inside {
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.skill-pct-right, .skill-pct {
color: inherit;
font-size: 13px;
font-weight: 700;
min-width: 36px;
text-align: right;
}
</style>
</head>
<body>
<section class="skills-section">
<h2 class="skills-title">Moje umiejętności</h2>
<p class="skills-subtitle">Stack technologiczny w projektowaniu stron internetowy
… (pobierz plik .html żeby zobaczyć pełny kod)[ Krok po kroku: od konfiguracji do gotowego kodu na stronę internetową ]
Jakużywaćgeneratoraprogressbar
Wybierz typ paska
Poziome skill bary na portfolio, kołowe na dashboardy, półkole na wskaźniki, pionowe na wykresy. Kluczowe przy projektowaniu stron internetowych.
Dobierz kolory
Każdy pasek ma własny color picker. Użyj gradientu dwukolorowego lub wybierz gotowy motyw (Light/Dark/Gradient/Minimal/Colorful) pasujący do strony www.
Skonfiguruj animację
Ustaw czas trwania, stagger delay (opóźnienie kolejnych barów) i funkcję easing. IntersectionObserver uruchamia animację przy scroll — standard w tworzeniu stron.
Użyj presetów
4 gotowe presety: Umiejętności techniczne, Postęp projektu, Statystyki zespołu, Języki programowania. Jeden klik i masz profesjonalną sekcję dla Twojej strony internetowej.
Eksportuj kod
Wygeneruj kompletny plik HTML z CSS i JS wewnątrz. Skopiuj do schowka lub pobierz plik .html — gotowy do wklejenia na stronę www lub WordPress.
Dostosuj do projektu
Zmień font, border-radius, wysokość toru, pozycję procentów i etykiet. Generator daje pełną kontrolę nad każdym elementem sekcji skill barów w Twojej witrynie.
Progress bar i skill bar w projektowaniu stron internetowych
Progress bary i skill bary to jedne z najczęściej stosowanych elementów UI przy tworzeniu stron internetowych dla agencji, freelancerów i firm IT. Wizualizują poziom umiejętności, postęp projektu lub kompetencje zespołu w sposób natychmiastowo zrozumiały dla odwiedzającego.
Generator progress bar Studio Kalmus obsługuje cztery typy barów: poziome paski (klasyczne skill bary stosowane na stronach portfolio i CV online), kołowe progress bary w formie donut chart (popularne w dashboardach SaaS i sekcjach statystyk), semi-circle gauge (wskaźniki prędkości i wydajności) oraz pionowe bary kolumnowe (infografiki i raporty). Każdy typ generuje czysty, semantyczny kod HTML + CSS + JS gotowy do wklejenia przy projektowaniu stron internetowych.
Animacja fill z IntersectionObserver to standard w nowoczesnym tworzeniu stron internetowych. Pasek animuje się od 0% do wartości docelowej dopiero gdy element wchodzi w widok użytkownika — nie wcześniej. Takie podejście jest nie tylko estetyczne, ale też wydajne: animacja CSS transition nie blokuje wątku głównego i nie wpływa negatywnie na Core Web Vitals strony www.
Stagger delay to technika, w której kolejne paski animują się z opóźnieniem (np. co 150 ms), tworząc efekt kaskady. Przy projektowaniu stron internetowych stagger znacząco poprawia perceived performance i sprawia, że sekcja wygląda bardziej dopracowana. Generator pozwala ustawić dowolne opóźnienie od 0 do 500 ms.
Wygenerowany kod jest w pełni samodzielny — nie wymaga żadnych zewnętrznych bibliotek (bez jQuery, bez Bootstrap). To ważne dla wydajności strony internetowej: mniej zasobów do załadowania, szybszy Time to Interactive, lepszy wynik PageSpeed. Generator tworzy minimalny, czysty CSS i JS gotowy do wklejenia bezpośrednio w WordPress, Elementor lub dowolny CMS przy tworzeniu stron internetowych.
[ Progress bar i skill bar w projektowaniu stron www — odpowiedzi ]
Najczęściejzadawanepytania
Potrzebujesz profesjonalnej strony internetowej?
Generator progress bar to jedno z dziesiątek darmowych narzędzi, które tworzymy dla społeczności web. Jeśli szukasz agencji do projektowania stron internetowych, tworzenia stron www lub pozycjonowania — jesteśmy do dyspozycji.