Css ve jQuery İle ProgressBar Yapımı

Merhaba Arkadaşlar,

Bugünkü makalemizde bir çok grafik gösterimlerinde , geri sayım araçlarında kullanılan ProgressBar’ ları işleyeceğiz. İlk önce Css ile görünümümüzü tamamlayacağız ve daha sonra jQuery yardımı ile ufak animasyonlar vererek bu küçük tasarımımızı güzelleştireceğiz. Çalışma mantığı olarak baktığımızda iç içe iki adet div’ imiz olacak ve üstteki div progressbar’ ın sınırlarının belirleneceği alan olacaktır. İçeride bulunacak div ise yüksekliğini ve %100 genişliğini içerisinde bulunduğu div’ e göre belirleyecek olup bir arka plan rengi ile Bar’ ın yüzde kaç oranında dolu olduğunu bize gösterecektir. Sayfa ilk yüklendiğinde de jQuery den yardım isteyerek bar doluluk oranının yavaş bir gösterimde önümüze gelmesini sağlayacağız.

İşlemlerimize başlarken ilk olarak tüm çalışma dosyalarımızı içinde tutacağımız bir klasör oluşturalım ve bu klasörün içerisine de ” index.html ” isimli bir sayfa ekleyelim.

Html sayfamızı bir metin ediörü ile açalım ve ana html kodlarımızı yazıp www.jquery.com adresi içerisinden bulabileceğimiz son sürüm jQuery kütüphanesini de sayfamıza dahil edelim. İlk kod yapımız şu şekilde olacaktır :


<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    
</body>
</html>

Şimdi içe içe iki adet div açıyoruz ve Css ile bu div’leri istediğimiz biçime getiriyoruz. Yazının başında da belirttiğim gibi ilk div sınırları belirleyecek ve ikinci div de doluluk oranını gösterecektir. Renk tonunu css3pie.com adresinden gradient vererek belirliyorum ve renk tonunun bulunacağı div’ in genişliğini direkt olarak kendisine veriyorum. Bunun nedeni oluşturabileceğimiz diğer progressbar’lar da aynı boyutta olmayacağı için karışıklık olmamasıdır. Kodlarımızın şu an ki görünümü şu şekilde olacaktır :


<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
        .main-progress{width: 500px; height: 28px; padding: 2px; border: 1px solid #5b5b5b; border-radius: 30px;}
        .percent{height: 100%; border-radius: 30px;
                    background: #F7F7F7;
                    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#F4AF15));
                    background: -webkit-linear-gradient(#F7F7F7, #F4AF15);
                    background: -moz-linear-gradient(#F7F7F7, #F4AF15);
                    background: -ms-linear-gradient(#F7F7F7, #F4AF15);
                    background: -o-linear-gradient(#F7F7F7, #F4AF15);
                    background: linear-gradient(#F7F7F7, #F4AF15);
        }
    </style>
</head>
<body>
<div class="main-progress">
    <div class="percent" style="width: 80%;"></div>
</div>
</body>
</html>

Yukarıda ki kod yapısı ile html sayfayı çalıştırdığımızda istediğimiz görüntüye ulaşmış olacağımızı göreceğiz. Ana div içerisine eklenmiş ve bu ana div’in %80 ‘ lik bir bölümünü doldurmuş ” percent ” class’ lı div’ i göreceğiz. Div sayımızı arttırarak görünüm alabiliriz ama ilk olarak jQuery ile ilgili animasyonumuzu yapmak istiyorum. Kurduğumuz mantık şu şekilde olacaktır :

İlk açılışta renkli percent class’ ımız hiç görünmeyecek ve 1 saniye gibi bir süre içerisinde basit ve güzel bir animasyon ile yüzde kaç oranında dolu ise bu alanı kaplayacaktır.


<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
           var pWidth = $(".percent").css("width");
           $(".percent").css({"width":"0px"});
           $(".percent").animate({"width":pWidth},(3000));
        });
    </script>
    <style>
        .main-progress{width: 500px; height: 28px; padding: 2px; border: 1px solid #5b5b5b; border-radius: 30px;}
        .percent{height: 100%; border-radius: 30px;
                    background: #F7F7F7;
                    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#F4AF15));
                    background: -webkit-linear-gradient(#F7F7F7, #F4AF15);
                    background: -moz-linear-gradient(#F7F7F7, #F4AF15);
                    background: -ms-linear-gradient(#F7F7F7, #F4AF15);
                    background: -o-linear-gradient(#F7F7F7, #F4AF15);
                    background: linear-gradient(#F7F7F7, #F4AF15);
        }
    </style>
</head>
<body>
<div class="main-progress">
    <div class="percent" style="width: 80%;"></div>
</div>
</body>
</html>

Artık bu kod bloğu ile de makalenin giriş yazısında belirttiğimiz görünüme ulaşmış olduk. Peki uygulamamız bitti mi ? Tabii ki hayır 🙂 . Şimdi alt alta bir kaç farklı renk tonunda ProgressBar oluşturalım ve farklı yüzdeler ile bunların nasıl bir yüklenme şekli oluşturduğunu görelim.

Bir kaç adet Bar olacağı için şimdi oluşturduğumuz Css kodlarını birazcık değiştirmemiz gerekecektir. Çünkü şu an ki sistemde tüm percent’ lara aynı renk tonu verilecektir. ilk olarak ” main-progress ” div’leri ve tüm içindekileri kopyalayarak çoğaltıyoruz. Verdiğimiz gradient’ i kaldırıyoruz ve tüm percent class’ lı div’ lere ayrı ayrı type1 , type2 , type3 class’ larını ekliyoruz. Daha sonra da bu type Class’ larına css ile ayrı ayrı Gradient ler veriyoruz.

Son olarak yapacağımız değişiklikte jQuery içerisinden olması gerekmektedir. Şu an ki görünümde her ne kadar 3 farklı genişlik versek de sayfa çalıştırıldığında ilk div’ in %80′ lik genişliği alınarak buna göre işlem yapılıyor. Bu nedenle üç farklı değişken oluşturup bu değişkenlere üç farklı div’in genişliklerini aldırıyoruz. jQuery kodlarımız arasında da buna uygun değişken isimleri ile bilgileri aldırıyoruz.

Makalemizin son kod bloğu ve son çalışır hali şu şekilde olacaktır :


<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
           var type1Width = $(".percent.type1").css("width");
           var type2Width = $(".percent.type2").css("width");
           var type3Width = $(".percent.type3").css("width");
           $(".percent").css({"width":"0px"});
           $(".percent.type1").animate({"width":type1Width},(3000));
           $(".percent.type2").animate({"width":type2Width},(3000));
           $(".percent.type3").animate({"width":type3Width},(3000));
        });
    </script>
    <style>
        .main-progress{width: 500px; height: 28px; padding: 2px; border: 1px solid #5b5b5b; border-radius: 30px;}
        .percent{height: 100%; border-radius: 30px;}
        .type1{background: #F7F7F7;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#F4AF15));background: -webkit-linear-gradient(#F7F7F7, #F4AF15);background: -moz-linear-gradient(#F7F7F7, #F4AF15);background: -ms-linear-gradient(#F7F7F7, #F4AF15);background: -o-linear-gradient(#F7F7F7, #F4AF15);background: linear-gradient(#F7F7F7, #F4AF15);}
        .type2{background: #4f3df7;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4f3df7), to(#e6e5f7));background: -webkit-linear-gradient(#4f3df7, #e6e5f7);background: -moz-linear-gradient(#4f3df7, #e6e5f7);background: -ms-linear-gradient(#4f3df7, #e6e5f7);background: -o-linear-gradient(#4f3df7, #e6e5f7);background: linear-gradient(#4f3df7, #e6e5f7);}
        .type3{background: #45fa45;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#45fa45), to(#e5f7e5));background: -webkit-linear-gradient(#45fa45, #e5f7e5);background: -moz-linear-gradient(#45fa45, #e5f7e5);background: -ms-linear-gradient(#45fa45, #e5f7e5);background: -o-linear-gradient(#45fa45, #e5f7e5);background: linear-gradient(#45fa45, #e5f7e5);}
    </style>
</head>
<body>
<div class="main-progress">
    <div class="percent type1" style="width: 80%;"></div>
</div>
<br/>
<div class="main-progress">
    <div class="percent type2" style="width: 60%;"></div>
</div>
<br/>
<div class="main-progress">
    <div class="percent type3" style="width: 40%;"></div>
</div>
</body>
</html>

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 40 No ‘lu Maddeden İndirebilirsiniz..

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *