Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Yüklenme Kodu
#1
W3school sitesinde gezinirken JS kodları ilgimi çekti. Yüklenme butonu (Kodu)ile karşılaştım.Çok hoşuma gitti sizlerle paylaşmak istedim.
Arkadaşlar Kod 2 Adımlı Önce
Bar Kutusu'nu Oluşturuyoruz. 
Adım 1) HTML Kodlarını Ekleyin.
Kod:
<div id="myProgress">
 <div id="myBar"></div>
</div>
Adım 2) CSS Kodlarını Ekleyin.
Kod:
#myProgress {
   width: 100%;
   background-color: grey;
}
#myBar {
   width: 1%;
   height: 30px;
   background-color: green;
}
Adım 3) Son Olarak Bunlarıda Ekleyin(JS Kodları) 
Kod:
function move() {
   var elem = document.getElementById("myBar");
   var width = 1;
   var id = setInterval(frame, 10);
   function frame() {
       if (width >= 100) {
           clearInterval(id);
       } else {
           width++;
           elem.style.width = width + '%';
       }
   }
}
Adım 2 - Yüklenme Kodları 
Adım 1) HTML Kodlarını Ekleyin.
Kod:
<div id="myProgress">
 <div id="myBar">10%</div>
</div>
Adım 2) CSS Kodlarını Ekleyin. 
Kod:
#myBar {
   width: 10%;
   height: 30px;
   background-color: #4CAF50;
   text-align: center; /* To center it horizontally (if you want) */
   line-height: 30px; /* To center it vertically */
   color: white;
}
Adım 3) Son Olarak Javascript kodlarını ekleyin.
Kod:
function move() {
   var elem = document.getElementById("myBar");
   var width = 10;
   var id = setInterval(frame, 10);
   function frame() {
       if (width >= 100) {
           clearInterval(id);
       } else {
           width++;
           elem.style.width = width + '%';
           elem.innerHTML = width * 1 + '%';
       }
   }
}
Buyrun Buda Demo ;
Daha Ayrıntılı Anlatım ;

W3School'a Bu Güzel Kod Için Teşekkür ediyoruz.
Ara
Cevapla PGM
Teşekkür verenler:
#2
Teşekkürler, İşime Yarıyabilir :)
Cevapla PGM
Teşekkür verenler:
#3
Rica ederim hocam :)
Ara
Cevapla PGM
Teşekkür verenler:
#4
Fonksiyonu ne tetikleyecek, keşke onu da yazsaydınız. W3S'de buton kullanmışlar. Onu kullanabilirsiniz mesela.
atakaj
"I am constantly torn between killing myself or everyone around me."

Ara
Cevapla PGM
Teşekkür verenler:
#5
Evet hocam daha detaylı için konuya link ekliyorum. Ekleme için teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#6
tıklandığında 10 saniye de bar %100 genişliyor.Mesele bunu sayfa yüklenmesi miktarına göre yönlendirmek ;)
Tüm Destek Forumun Kuralları
Görevli Kuralları
Ücretli Mybb Tema Tasarım ve Kodlama , Bootstrap(html/css) duyarlı kodlamalar Yapılır.
Prof. Dr. MyBB Öğretmeni kaRanLık-61( Mustafa SEVİM )[ 2010-2022 => 10TL'de 12 Sene ]

İki Tarafta Zifiri kaRanLık




Mutlu Son İstiyorsan Çabalamalısın. Sadece Oturduğu Yerden Başarıya ulaşan varlık tavuktur. Bir Kurt Asla Evcilleşip Köpek Olmaz...
Cevapla PGM
Teşekkür verenler:
#7
Hocam orayıda Yazanlar ayarlasın :)
Ara
Cevapla PGM
Teşekkür verenler:
#8
@๘קrofessional™ teşekkürlerhocamçok güzel bir paylaşım olmuş :)
Ara
Cevapla PGM
Teşekkür verenler:
#9
Rica ederim hocam. Görevim
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping