Progress Bars(İlerleme Çubuğu)

Progress Bars(İlerleme Çubuğu) olarak bilenen, görevi ve amacı işlem aşamasını bizlere anlatmak istemektedir.

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 bunda bitme %20-%40 kaldı gibi bildirimleri kişilere bildirmek ve bilgilendirmek amaçlıdır.Bağış sisteminde kullanımı ise Belirli bir limit girilir %50 bu 500$ ise bu bağışların misal 500$ e 100$ kaldıgı gibi belirli limitler,ifadeler koyarak yansıta biliriz.

Ekstra özellik olarak, şunuda kullanabilirsiniz css ayarından düzeltmeler yaparak CV sayfanıza entegre edebilirsiniz.

Nasıl Edebilirim , Nasıl Kullanabilirim
Örneğin; HTML bilginiz karşına,altına,yanına,üstüne ekleyebilir, htlm bilginizin seviyesini belirtmiş olursunuz.


Windows 8 dememdeki kasıt dikdörtgensi bir stil oluşturduğu için, farklı bir modern yaklaşım olması için söyledim,ayrıca düzenleye bilir istediğiniz formatda kodlayabilirsiniz.Kodların açıklamları karşısındadır.


Nasıl ve Nereye Ekleyeceğim ?
Aşağıdaki kodumuzu çalışmanızda uygun olan ve işlem için yer atadığınız kısma eklemeniz mümkündür.

Kod:


<div class="isleniyor arkaplan_mavi yurut">

    <span style="width:10%"></span>

</div>



10% işlem seviyesi, bunu kendinze göre veya veritabanından alınan veriyi 10% yerine yazdırmanız halinde,yazdırılan seviye ortaya çıkacaktır.

"width:10%"



Tarayıcınızdaki Çıktı:
10%

50%

100%


İndex.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sanal Kurs:Windows 8 İşleniyor ve Yükleniyor Bar</title>

</head>

       <style>

        .isleniyor {

            background-color: #1a1a1a; /* Bar zemin rengi.*/

            height: 25px; /* Bar Yükseklik.*/

            padding: 4px; /* Bar sağ,sol,üst,alt bölümlerindeki işlem bar ile arasındaki boşluk mesafesi.*/

            width: 300px; /* Bar Genişlik.*/

            margin: 70px 0 20px 0; /* Bar Kenar boşluğu.*/        

            -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;

            -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;

            box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           

        }

        

        .isleniyor span {  /* İsleme yüzdelik bar içeriği.*/

            display: inline-block; /* Ders olarak anlacagım.*/

            height: 100%; /* Yükseklik.*/

            background-color: #777; 

            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

            box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

            -webkit-transition: width .4s ease-in-out;

            -moz-transition: width .4s ease-in-out;

            -ms-transition: width .4s ease-in-out;

            -o-transition: width .4s ease-in-out;

            transition: width .4s ease-in-out;        

        }

        

        /*---------------------------*/            

        

        .arkaplan_mavi span {

            background-color: #34c2e3; /* Bar Renk Kodu */ 

        }

        

        /*---------------------------*/        

        

        .yurut span { /* İşlem Seviyesi */

            -webkit-background-size: 30px 30px;

            -moz-background-size: 30px 30px;

            background-size: 30px 30px;            

            background-image: -webkit-gradient(linear, left top, right bottom,

                                color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),

                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),

                                color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),

                                to(transparent));

            background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,

                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,

                                transparent 75%, transparent);

            background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,

                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,

                                transparent 75%, transparent);

            background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,

                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,

                                transparent 75%, transparent);

            background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,

                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,

                                transparent 75%, transparent);

            background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,

                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,

                                transparent 75%, transparent);            

            

            -webkit-animation: animate-yurut 3s linear infinite;

            -moz-animation: animate-yurut 3s linear infinite;               

        }

        

        @-webkit-keyframes animate-yurut { 

            0% {background-position: 0 0;} 100% {background-position: 60px 0;}

        }

        

        

        @-moz-keyframes animate-yurut {

            0% {background-position: 0 0;} 100% {background-position: 60px 0;}

        }

        

        

    </style>

<body>



<div class="isleniyor arkaplan_mavi yurut">

    <span style="width:10%"></span>

</div>



<!-- Javascript -->

<script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- jquery dosyası bağlantı adresi -->



</body>

</html>

  • 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