FonPageBuilder İlerleme Göstergesi Bileşeni Son Güncelleme: 04-07-2026

İlerleme Çubuğu (Göstergesi) Bileşeni Nedir?

Fonpagebuilder İlerleme Çubuğu (Göstergesi) bileşeni; projelerinizdeki başarı oranlarını, hizmet kapasitelerini veya istatistiksel verileri, modern yatay (Linear) ve estetik dairesel (Radial) stil seçenekleriyle dinamik ve animasyonlu bir şekilde görselleştirmenize olanak tanır.

Verilerinizi sadece rakamlarla değil, kullanıcı etkileşimini artıran canlı sayaçlar ve özelleştirilebilir şerit efektli çubuklarla hayat bulan görsel grafiklere dönüştürün.

• Çift Modlu Tasarım: Klasik Bootstrap tabanlı yatay ilerleme çubuğu veya modern dairesel (Circle) görünüm arasında kolayca geçiş yapabilme özelliği.
• Akıllı Animasyon Sistemi: Sayfa kaydırıldığında devreye giren (Intersection Observer), ondalık hassasiyetine sahip dinamik yüzde sayacı.
• Esnek Alt Bilgi Desteği: Her iki stil için de sunulan, veriye bağlam kazandıran özelleştirilebilir alt bilgi (subtitle) alanı.
• Gelişmiş Görsel Denetim: Yatay çubuklar için isteğe bağlı etkinleştirilebilen hareketli şerit (Stripe & Animated) efektleri ve sınırsız renk seçeneği.

İlerleme Çubuğu (Göstergesi) Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

• Bileşen Adı
  : Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.
• İlerleme Çubuğu Tipi
  : Kullanmak istediğiniz gösterge stilini seçin.

  • Daire: Modern bir dairesel ilerleme göstergesi sunar.
  • Çizgi: Klasik Bootstrap tabanlı yatay ilerleme çubuğu
• Şeritli Görünüm
  : İlerleme çuğubuğuna eğik şeritler ekleyerek görselliği daha da arttırır. Bu seneçek sadece Çizgi stilinde gösterilir ve kullanılır.
• Hareketli Şeritler
  : İlerleme çuğubuğunadaki eğik şeritlere animasyon ekler. Bu seneçek sadece Çizgi stilinde ve Şeritli Görünüm seçeneği etkinleştirildiğinde gösterilir ve kullanılır.
• Gösterge Genişliği (px)
  : Dairesel göstergenin toplam genişliğini piksel (px) cinsinden belirleyin. Örn: 150. Bu değer, bileşenin sayfada ne kadar büyük görüneceğini kontrol eder. NOT: Bu seçenek sadece Daire stili seçildiğinde gösterilir ve kullanılır.
• Sütun Sayısı
  : Dairesel ilerleme göstergelerinin yatay düzlemde responsive olarak her bir satırda kaç adet gösterileceğini seçiniz. NOT: Bu seçenek sadece Daire stili seçildiğinde gösterilir ve kullanılır.

İçerik Ayarları

İlerleme Çubuğu İçerik Ayarları bölümündeki Ögeler başlığının karşısındaki Ekle düğmesine tıklayarak birden fazla İlerleme Çubuğu Ögesi ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi; düzenleyebilir, sıralayabilir ve silebililirsiniz.

İlerleme Çubuğu Öge Düzenleme Penceresi:

• Başlık
  : Sitenizdeki aktif her bir dil için İlerleme Çubuğu Başlığı olarak gösterilmesini istediğiniz metni girin.
• Alt Bilgi / Ek Bilgi
  : İlerleme değerinin yanında (veya dairesel modelde altında) görünecek kısa açıklama metni. Örn: Ortalama 5 dk yanıt veya 10+ yıl deneyim. Boş bırakılırsa gösterilmeyecektir. Sitenizdeki aktif her bir dil için girilmelidir.
• Açıklama
  : İlerleme çubuğunun altında (veya dairesel modelde başlığın altında) görünecek açıklama metni. Boş bırakılırsa gösterilmeyecektir. Sitenizdeki aktif her bir dil için girilmelidir.
• İlerleme Değeri
  : İlerleme çubuğunun değerini yüzde olarak girin.Ondalık değerleri . (nokta) ile belirtin. Örneğin: 75 veya 99.99
• İlerleme Rengi
  : İlerleme çubuğunun rengini seçin.

Bileşen Stil Ayarları

• Sınıf
  : Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
• Dahili Stil
  : Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Flipbox (Dönen Kutu) Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-text-html-widget css sınıfı altından inceleyebilirsiniz.

  												
  @widgetId .light-grey-rounded-box{
  	background-color: #f8f9fa;
  	border: 1px solid #e9ecef;
  	border-radius: 5px;
  }
  												
  											

Bileşen Penceresi Kayıt Düğmeleri

• Sayfayı Kaydet
  : Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
• Kaydet & Düzenle
  : Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.