Progress Circle elementi, ilerleme oranlarını dairesel bir biçimde gösterir. Görev tamamlama, proje ilerlemesi veya KPI takibi gibi senaryolarda kullanıcıya sürecin görsel bir özetini sunar.

Hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Proje tamamlama oranını göstermek,
• Bireysel görevlerin ilerlemesini takip etmek,
• Performans hedeflerinin ne kadarına ulaşıldığını görselleştirmek,
• KPI ölçümlerini sade bir daire grafiğiyle sunmak vb.

Görev Tamamlama

Bir proje yönetimi uygulamasında, kullanıcıya atanan görevlerin tamamlama yüzdesi Progress Circle ile görselleştirilir.

• Datasource üzerinden görev tamamlama yüzdesi alınır.
• Yüzde değeri dairenin iç kısmında gösterilir.
• Gradient renk geçişiyle ilerleme daha dinamik sunulur.

1) Statik Kullanım Senaryosu

Örnek Senaryo – Sabit Yüzde
Bir kullanıcı profili ekranında Progress Circle her zaman sabit bir yüzde gösterir.

• Datasource: Gerekli değil
• Percent: 65
• Renkler: Yeşil
• Show Percentage: true

Kullanıcı dairenin içinde her zaman %65 doluluk görür.

UI Design İşlemleri

1. Progress Circle 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 daire
• Gradient Colors → Başlangıç: #00BFFF, Bitiş: #28a745
• Show Percentage → Aktif → Ortada %65 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 Circle 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 TaskProgressCircle adını verin.
3. Aşağıdaki tabloyu oluşturun.

4. SQL Actions’a tıklayın ve aksiyona TaskProgressCircle ismini verin.
5. Aşağıdaki SQL komutunu girin. 

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. Ekrana eklediğiniz Progress Circle elementine tıklayın.
3. Percent 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
• Show Percentage → Ortada dinamik değer görünür

Senaryo Adımı Tamamlandığında

• Daire %40, %65 veya %85 oranında dolu görünür.
• Yüzdelik değer dairenin ortasında gösterilir.
• Kullanıcı ilerlemenin hangi aşamada olduğunu anında görebilir.

Kısıtlamalar

• Percent değeri yalnızca 0–100 aralığında çalışır.
• Show Percentage özelliği yalnızca web uygulamalarında ortada metin olarak gösterilir.
• Çok fazla görev bağlandığında her görev için ayrı Progress Circle eklemek gerekebilir.