Html Yardım etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Html Yardım etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

2 Ağustos 2015 Pazar

Progress Bars(İlerleme Çubuğu)

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.


<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%"
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>

Gönderen zaman: Hiç yorum yok:
Etiketler: ,
Kaydol: Kayıtlar (Atom)