Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu (Progress Bar) | bildirgec.org

Bu makalede sadece CSS kullanılarak oluşturulmuş bir ilerleme çubuğunun nasıl oluşturulabileceğini anlatmaya çalışacağım. Aslında hile çok basit. İhtiyacımız olanlar 3 element, bir kapsayıcı (container) ve 2 içiçe geçmiş element.

demo | indir

Konsept
Kapsayıcının arkaplanına güzel görünümlü bir resim yerleştirip kapsayıcının sabit yüksekliğini ve genişliğini belirteceğiz. İlk astımız (SPAN) ilerleme çubuğu görevini üstlenecek. İkinci astımızı (EM) ise ilerleme çubuğunun üzerine mutlak (absolute) konumlandıracağız ve onu sola doğru kaydırarak istediğimiz seviyeye çekeceğiz. EM, kapsayıcı ile aynı arkaplana sahip, bu sayede ilerleme çubuğunun bir süre sonra durduğu izlenimini vermiş olacağız.

Biçimlendirme

Kodu mümkün olduğu kadar anlamlı tutabilmek için bazı değerlerde tanımlama listesi (Definition List - DL) kullandım. Tek bir ilerleme çubuğu için istediğiniz elementi kullanabilrsiniz. Ben paragrafları sevdiğim için örneğimde P kullandım.

<dd>
    <span><em style="left:100px">50%</em></span>
</dd>

Sol EM konumlandırması için satıriçi stil kullandım. Her iki değeri de aynı yere bir kerede yazmak daha elverişli.

Animasyon
Peki bu nasıl oluyor? Elbette animasyonlu gif imajı kullanarak. Onları hatırlıyorsunuz değil mi? SPAN elementinin 200px genişliğinde arkaplan imajı var ve bu imaj "sıfır"dan 200px'e kadar animasyon içeriyor. Hangi yüzdeyi kullanırsak kullanalım, imaj 200px'in sonuna kadar gidiyor ve sonra duruyor. Durma efekti ise daha önce bahsettiğim EM ile yapılıyor.

EM Konumlandırması

Örneğimde 200px genişliğinde ilerleme çubuğu kullandım. EM elementinin genişliği de 200px. Buradan her bir yüzdenin 2px genişliğinde olduğu anlamını çıkarmışsınızdır. Eğer EM'i doğru olarak itelemek istiyorsanız o zaman yüzde değerinizi 2 ile çarpmanız gerek. Örneğin %50'nin anlamı 100px genişliğinde, %24'ün anlamı 48px genişliğinde, %75'in anlamı 150px genişliğinde olacak... Buradan ne demek istediğimi anlamışsınızdır.

demo | indir

Kaynak: CSS Globe