HTML5: Progress Bars(İlerleme Çubuğu)

HTML5: Progress Bars (İlerleme Çubuğu) kullanımını öğrenelim.

HTML5: Progress Bars (İlerleme Çubuğu) kullanımını öğrenelim.

HTML 5 ile Progress Bars (İlerleme Çubuğu) kullanımı basit ve fonksiyonel olarak karşımıza gelmektedir. etiketi kullanırken value ve max değerleri girmeniz yeterli olacaktır. Web geliştiriciler CSS dosyası oluşturarak farklı biçimlerde tasarlayabilirler.

Progress Bars (İlerleme Çubuğu) olarak bilenen, görevi ve amacı işlem aşamasını bizlere anlatmak istemektedir. Örneğin bir çalışmanız var veya bağış sistemi olsun. "Bitmeye %20-%40 kaldı" gibi bildirimleri kişilere bildirmek ve bilgilendirmek amaçlıdır. Bağış sisteminde kullanımı ise belirli bir limit girilir: Mesela %50 olsun. Bu 500$ ise bu bağışların misal 500$'e 100$ kaldıgı gibi belirli limitler, ifadeler koyarak yansıtabiliriz.

Ekstra özellik olarak, şunu da kullanabilirsiniz: CSS ayarından düzeltmeler yaparak CV sayfanıza entegre edebilirsiniz.

Nasıl Edebilirim , Nasıl Kullanabilirim?

Örneğin; HTML bilginizin karşısına, altına, yanına, üstüne ekleyebilir, HTML bilginizin seviyesini belirtmiş olursunuz.

Kod:


<progress>



Örnek:

<progress value="10" max="100">%10</progress>



max: Görevin veya ilerlemenin yüzdelik seviyesini sormaktadır.

value: Görevin veya ilerlemenin yüzde kaç olduğunu sormaktadır.

Bir çalışmamız veya bitim sürecini belirtmemiz gerekebilir. Bunu ilerleme çubuğu ile aşağıdaki şekilde de gösterebiliriz.

index.html

<!DOCTYPE html>

<html>

<body>



<progress value="10" max="100"></progress>



</body>

</html>



Çalışmalarınızda Başarılar Dilerim
  • Etiketler;
Zafer Başpınar
Zafer BAŞPINAR Web hizmetleri alanına 2000 yıllarında başlayarak web hizmetleri alanında eğitim ve öğretim hayatına katarak gelişmekte olan web hizmetleri teknolojisine ayak uydurmaya gayret göstermektedir. Şuan ki durumu eğitim ve öğretim hayatına yurt dışında lisans olarak devam etmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git