Progress Bar elementi, süreçlerin ilerleyişini kullanıcıya görsel olarak göstermenizi sağlar. Yükleme durumları, görev tamamlama oranları, anket ilerlemeleri veya çok adımlı iş akışları için kullanılır.

Web ve mobil uygulamalarda desteklenir.

Kullanım Alanları

• Dosya yükleme ilerlemesini göstermek,
• Görev veya proje tamamlama yüzdesini izlemek,
• Anket veya sınav ilerleme çubuğu oluşturmak,
• Kullanıcı onboarding adımlarını görselleştirmek vb. 

Görev Tamamlama Senaryosu

Bir proje yönetimi uygulamasında, kullanıcının tamamladığı görevlerin oranı Progress Bar ile gösterilir. Kullanıcı, çubuk üzerindeki doluluk oranını ve yüzdesini görerek sürecin ne kadar ilerlediğini kolayca takip eder.

1) Statik Kullanım Senaryosu

Örnek Senaryo – Sabit Yüzde

Bir dosya yükleme ekranında Progress Bar her zaman sabit bir yüzde gösterir.

• Datasource: Gerekli değil
• Percent: 65
• Renkler: Yeşil
• Hide Percentage: false

Kullanıcı her zaman %65 dolu bir çubuk görür.

UI Design İşlemleri

1. Progress Bar elementini ekleyin.
2. Properties panelinde Percent değerini 65 olarak girin.
3. Renkleri First Gradient Color ve Second Gradient Color ile özelleştirin.

Özelliklerin Kullanımı

• Percent → 65 → %65 dolu çubuk
• Gradient Colors → Başlangıç: #00BFFF, Bitiş: #28a745
• Hide Percentage → Aktif edilirse sadece çubuk görünür

2) Dinamik Kullanım Senaryosu

Örnek Senaryo – Görev Tamamlama Takibi

Bir proje yönetimi uygulamasında, kullanıcıların görev tamamlama oranı Progress Bar ile gösterilir.

• Datasource: TaskProgress tablosu
• Percent: Progress kolonundan otomatik gelir

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables > + ikonuna tıklayın ve tabloya “TaskProgress” adını verin.
3. Aşağıdaki tabloyu oluşturun. 

4. SQL Actions’a tıklayın ve aksiyona TaskProgress ismini verin.

SQL Örneği

SELECT 'UI Design Screens' AS TaskName, 40 AS ProgressUNION ALLSELECT 'API Integration', 65UNION ALLSELECT 'Testing & QA', 85‍

UI Design İşlemleri

1. Uygulama ekranında sağ kenardaki Add Action butonundan→ Custom > TaskProgress seçin.
2. Uygulama ekranında eklediğiniz Progress Bar elementine tıklayın.
3. Datasource alanından TaskProgress aksiyonunu bağlayın.

Özelliklerin Kullanımı

• Percent → Progress kolonundan dinamik değer alır
• Gradient Colors → Renk geçişi ile görsellik artırılır
• Hide Percentage → Yüzde bilgisini gizleme opsiyonu vardır

Senaryo Adımı Tamamlandığında

• Çubuk %65 oranında dolu görünür.
• Yüzdelik değer çubuğun yanında gösterilir.
• Kullanıcı ilerlemenin hangi aşamada olduğunu anında görebilir.

Kısıtlamalar

• Çok sayıda Progress Bar aynı ekranda kullanıldığında performans düşebilir.
• Gradient renk desteği bazı cihazlarda farklı görünebilir.

İpuçları ve Best Practices

Percent değerini her zaman Datasource’a bağlayın, statik bırakmayın.

• Kritik görevlerde kırmızı, tamamlanmaya yakınlarda yeşil gibi kontrast renkler kullanın.
• Mobil uygulamalarda dikey progress bar, dar alanlarda daha uygun olabilir.