Progress Steps Örneği

Bu yazımızda, HTML, CSS ve JavaScript kullanarak progress steps örneği oluşturacağız. Bu örnek ile şu konuları pekiştireceğiz:

☑️ İlerleme çubuğunun temel yapısını ve görünümünü HTML ve CSS ile nasıl oluşturduğunuzu.
☑️ CSS ile ilerleme çubuğu ve düğmelerin stillerini ve durumlarını nasıl yönettiğinizi.
☑️ İlerleme çubuğunun işlevselliğini JavaScript ile nasıl sağladığınızı ve adımlar arasında geçiş yapmayı nasıl başardığınızı.

Yapacağımız çalışma, çeşitli form uygulamalarında görebileceğiniz ilerleme çubuğunun işleyişini gösteren basit bir web uygulamasıdır. HTML, CSS ve JavaScript kullanarak kodlanmıştır.

Uygulama, ilerleme çubuğunu temsil eden mavi çizgi ve ilerleme adımlarını gösteren dairelerden oluşur. Önceden belirlenmiş adımlar arasında geçiş yapmak için “Prev (önceki)” ve “next (sonraki)” butonları bulunmaktadır. Örneğimizin işleyişini CodePen üzerinden inceleyebilirsiniz:

See the Pen Progress Steps by 1kodum (@1kodum) on CodePen.

⭐ HTML kodu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
<script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Progress Steps</title>

</head>

<body>

</div>

</div>

</body>

</html>

HTML kodu, uygulamamızın temel yapısını oluşturur. İşte bu kodun önemli bölümleri:

“container” adlı bir div, ilerleme adımı göstergesi ve düğmeleri içeren ana bölümü oluşturur.
“progress-container” adlı bir div, ilerleme çubuğunu ve adım dairelerini içerir.
- “progress” adlı bir div, ilerleme çubuğunun mavi kısmını temsil eder.
- “circle” adlı dört div, ilerleme adımlarını temsil eden dairelerdir. İlk daire “active” sınıfına sahiptir, bu da başlangıçta seçili olduğunu gösterir.
İki buton, “prev” ve “next” adımlar arasında geçiş yapmayı sağlar. “prev” butonu başlangıçta devre dışıdır (disabled özniteliği ile belirtilmiştir).

⭐ CSS kodu

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
:root {
--line-border-fill: #3498db;
--line-border-empty: #e0e0e0;
}
* {
box-sizing: border-box;
}
body {
background-color: #f6f7fb;
font-family: "Roboto", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress-container::before {
content: "";
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress {
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #fff;
color: #999;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border-color: var(--line-border-fill);
}
.btn {
background-color: var(--line-border-fill);
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
padding: 8px 30px;
margin: 5px;
font-size: 14px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus {
outline: 0;
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
}

100

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

:root {

--line-border-fill: #3498db;

--line-border-empty: #e0e0e0;

}

* {

box-sizing: border-box;

}

body {

background-color: #f6f7fb;

font-family: "Roboto", sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.container {

text-align: center;

}

.progress-container {

display: flex;

justify-content: space-between;

position: relative;

margin-bottom: 30px;

max-width: 100%;

width: 350px;

}

.progress-container::before {

content: "";

background-color: var(--line-border-empty);

position: absolute;

top: 50%;

left: 0;

transform: translateY(-50%);

height: 4px;

width: 100%;

z-index: -1;

}

.progress {

background-color: var(--line-border-fill);

position: absolute;

top: 50%;

left: 0;

transform: translateY(-50%);

height: 4px;

width: 0%;

z-index: -1;

transition: 0.4s ease;

}

.circle {

background-color: #fff;

color: #999;

border-radius: 50%;

height: 30px;

width: 30px;

display: flex;

align-items: center;

justify-content: center;

border: 3px solid var(--line-border-empty);

transition: 0.4s ease;

}

.circle.active {

border-color: var(--line-border-fill);

}

.btn {

background-color: var(--line-border-fill);

color: #fff;

border: 0;

border-radius: 6px;

cursor: pointer;

font-family: inherit;

padding: 8px 30px;

margin: 5px;

font-size: 14px;

}

.btn:active {

transform: scale(0.98);

}

.btn:focus {

outline: 0;

}

.btn:disabled {

background-color: var(--line-border-empty);

cursor: not-allowed;

}

Yukarıdaki CSS kodumuz, ilerleme adımı göstergesi uygulamasının genel görünümünü ve stillerini sağlayarak uygulamamızı görsel olarak çekici bir hale getirir.

Genel Stil Ayarları:
- Google Fonts’tan “Roboto” yazı tipi içe aktarılır.
- :root içinde, ilerleme çubuğunun dolu ve boş kısımlarının renkleri tanımlanır.
- * seçicisi ile tüm HTML elemanları için box-sizing özelliği ‘border-box’ olarak ayarlanır.
Body Stil Ayarları:
- Arka plan rengi, yazı tipi, ekran düzeni ve boyutlandırma ile ilgili stiller uygulanır.
Container Stil Ayarları:
- İçeriğin ortalanmasını sağlayan text-align: center; özelliği uygulanır.
Progress-container Stil Ayarları:
- Flexbox özellikleri, ilerleme çubuğu ve adım dairelerinin konumlandırılması için kullanılır.
- ::before ile, ilerleme çubuğunun arka planı olarak kullanılacak boş çizgi oluşturulur.
Progress Stil Ayarları:
- İlerleme çubuğunun dolu kısmının pozisyonu, boyutu, rengi ve geçiş efekti tanımlanır.
Circle Stil Ayarları:
- Adım dairelerinin boyutu, şekli, rengi ve kenarlığı tanımlanır.
- .active sınıfı, seçili adımın kenarlık rengini değiştirir.
Button Stil Ayarları:
- Düğmelerin arka plan rengi, yazı rengi, kenarlığı, yuvarlatılmış köşeleri, imleci, dolgu ve yazı tipi boyutu gibi stiller uygulanır.
- Düğmelerin etkileşimli durumları (:active, :focus, :disabled) için özel stiller tanımlanır.

⭐ JavaScript kodu

Aşağıdaki JavaScript kodu, ilerleme adımı göstergesinin dinamik olarak güncellenmesini ve kullanıcıların adım numaraları arasında ilerlemelerini ve geri dönmelerini sağlar.

const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const circles = document.querySelectorAll(".circle");
let currentActive = 1;
next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}
update();
});
prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}
update();
});
function update() {
circles.forEach((circle, idx) => {
if (idx < currentActive) {
circle.classList.add("active");
} else {
circle.classList.remove("active");
}
});
const actives = document.querySelectorAll(".active");
progress.style.width =
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false;
next.disabled = false;
}
}

const progress = document.getElementById("progress");

const prev = document.getElementById("prev");

const next = document.getElementById("next");

const circles = document.querySelectorAll(".circle");

let currentActive = 1;

next.addEventListener("click", () => {

currentActive++;

if (currentActive > circles.length) {

currentActive = circles.length;

}

update();

});

prev.addEventListener("click", () => {

currentActive--;

if (currentActive < 1) {

currentActive = 1;

}

update();

});

function update() {

circles.forEach((circle, idx) => {

if (idx < currentActive) {

circle.classList.add("active");

} else {

circle.classList.remove("active");

}

});

const actives = document.querySelectorAll(".active");

progress.style.width =

((actives.length - 1) / (circles.length - 1)) * 100 + "%";

if (currentActive === 1) {

prev.disabled = true;

} else if (currentActive === circles.length) {

next.disabled = true;

} else {

prev.disabled = false;

next.disabled = false;

}

Değişkenlerin Tanımlanması:
- progress, prev, next ve circles gibi DOM elemanlarını seçmek için değişkenler tanımlanır.
- currentActive değişkeni, şu anda etkin olan adımın numarasını saklar ve başlangıç değeri olarak 1 atanır.
Next (İleri) Düğmesi İşleyicisi:
- next düğmesine tıklanması durumunda, currentActive değeri arttırılır.
- Eğer currentActive değeri, circles uzunluğunu aşarsa, değeri circles uzunluğuna eşitlenir.
- Son olarak, update() fonksiyonu çağrılır.
Prev (Geri) Düğmesi İşleyicisi:
- prev düğmesine tıklanması durumunda, currentActive değeri azaltılır.
- Eğer currentActive değeri 1’den küçükse, değeri 1’e eşitlenir.
- Son olarak, update() fonksiyonu çağrılır.
Update() Fonksiyonu:
- circles üzerinde bir döngü başlatır ve eğer idx (index), currentActive değerinden küçükse, circle‘a “active” sınıfı eklenir; aksi takdirde “active” sınıfı kaldırılır.
- actives değişkeni, şu anda “active” sınıfına sahip tüm elemanları seçer.
- İlerleme çubuğunun genişliği, etkin dairelerin sayısına göre güncellenir.
- currentActive değerine göre “Prev” ve “Next” düğmelerinin etkinlik durumu güncellenir.

İlgili Makaleler

HTML, CSS ve JavaScript ile Color Flipper Örneği

Blurry Loading Örneği

Copy Text to Clipboard Örneği

HTML, CSS ve JavaScript ile Navbar Örneği

Bir yanıt yazın Yanıtı iptal et