CSS İLE PROGRESS BAR

Css 3 ile artık javascript veya jquery kullanmadan nerdeyse herşeyi yapabiliyoruz. Bu yazıda nasıl bir css ile nasıl progress bar yapılacağını öğrenicez. Kullanımı ve kurulumu çok kolay.

Önce stilimizi hazırlıyoruz alttaki kodu kopyalayıp yapıştırın. Renk ayarları için sadece

.ui-progress-bar.hata .ui-progress {
background-color: #C43C35!important;
border: 1px solid #9c302a;
}

bölümlerindeki background-color ve border colorı ayarlamanız yeterlidir.

/* Barımızın arkasını yapıyoruz */
.ui-progress-bar {
position: relative;
height: 25px;
padding-right: 2px;
background-color: #abb2bc;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#949daa),color-stop(100%,#abb2bc));
background: -webkit-linear-gradient(#949daa 0%,#abb2bc 100%);
background: -moz-linear-gradient(#949daa 0%,#abb2bc 100%);
background: -o-linear-gradient(#949daa 0%,#abb2bc 100%);
background: -ms-linear-gradient(#949daa 0%,#abb2bc 100%);
background: linear-gradient(#949daa 0%,#abb2bc 100%);
-moz-box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.5), 0 1px 0 0 white;
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.5), 0 1px 0 0 white;
-o-box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.5), 0 1px 0 0 white;
box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.5), 0 1px 0 0 white;
}

.ui-progress-bar.mavi .ui-progress {
background-color: #339BB9!important;
border: 1px solid #287a91;
}

.ui-progress-bar.hata .ui-progress {
background-color: #C43C35!important;
border: 1px solid #9c302a;
}

.ui-progress-bar.uyari .ui-progress {
background-color: #D9B31A!important;
border: 1px solid #ab8d15;
}

.ui-progress-bar.basarili .ui-progress {
background-color: #57A957!important;
border: 1px solid #458845;
}

.ui-progress-bar .ui-progress {
position: relative;
display: block;
overflow: hidden;
/* Yüksekliği .ui-progress-bar alanından 2 piksel az olması gerekir*/
height: 23px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
-webkit-background-size: 44px 44px;
-moz-background-size: 36px 36px;
background-color: #74d04c;
border: 1px solid #4c8932;
}

Cssleri ister bir css dosyasında isterseniz kullandığınız sayfada <style> </style> tagleri içerisinde kullabilirsiniz.

Barı eklemek istediğiniz yere giriceğiniz kod ise

<div class=”ui-progress-bar ui-container”>
<div class=”ui-progress” style=”width: 100%;”> Barın içerisindeki yazı </div>
</div>

Eğer farklı bir renk istiyorsanız kullacanğınız kod ise

<div  class=”ui-progress-bar ui-container basarili“>
<div style=”width: 100%;”> Barın içerisindeki yazı </div>
</div>

Boyunu ayarlamak istediğinizde değiştireceğiniz yer ise width:100%; kısmıdır. 0-100 arası herhangi bir rakam girebilirsiniz.

Çalışan Örnekler