dizin sitesi takipçi satın al gündem forum

Progress bar yapımı

Ahbap

Premium Üye
Forum Üyesi
Katılım
29 Mayıs 2019
Mesajlar
4,233
Tepkime puanı
2
PHP:
<head> 

<title>Test Page</title> 

<style> 

 
* { font-family: "Arial", sans-serif; } 

 
#wrap { margin-top: 50px;text-align: center; } 

 
#barwrap { 

position: relative; /* to contain outer */ 

margin: 0 auto; /* to centre */ 

width: 250px;height: 20px; /* size of our bar - required */ 

text-align: left; 

font-weight: bold; 

border: 1px solid black; 

} 

 
#barwrap P { /* to contain text */ 

margin: 0; /* FF needs this or text drops below bar */ 

width: 250px; /* use this node to position text */ 

text-align: center; 

} 

 
#barwrap #outer { /* bar 'background' */ 

position: absolute; 

width: 100%; height: 100%; /* match parent size */ 

background: lightgreen; 

color: green; /* original colour of text */ 

} 

 
#barwrap #inner { 

position: relative; /* otherwise outer hides us */ 

width: 0; height: 100%; /* match parent */ 

overflow: hidden; /* to hide new text/prevent it wrapping */ 

background: green; 

color: lightgreen; /* colour of changed text */ 

} 

 
</style> 

 
<script> 

 
var time = 10000; // 10 secs 

var steps = 50; // Five per second 

var step = 1; 

 
function progress() { 

var bar = document.getElementById( "barwrap"); 

var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width 

var x = Math.round( aStep *step); 

var outer = document.getElementById( "outer"); 

var inner = document.getElementById( "inner"); 

 
// Work out seconds based on % progress from current step 

var secs = (( time /1000) -Math.floor( ( step /steps) *10)); 

 
inner.style.width = x +"px"; 

step++; 

 
// If 0 seconds, display waiting message instead 

outer.firstChild.innerHTML = ( secs? secs +" seconds...": "Please Wait..."); 

// Match text 

inner.firstChild.innerHTML = outer.firstChild.innerHTML; 

 
if( step > steps) redir(); 

else setTimeout( "progress();", time /steps); 

} 

 
function redir() { 

alert( "Redirecting now!"); 

} 

 
</script> 

</head> 

 
<body> 

 
<div id='wrap'> 

Progress: 

<div id='barwrap'> <!-- P wrappers for text positioning --> 

<div id='outer'><p></p></div> <!-- original colour/text --> 

<div id='inner'><p></p></div> <!-- new colour/text --> 

</div> 

 
<br> 

<a href='#' onClick='progress();'>Click here to start bar (only once please, you'll break it)</a> 

</div> 

 
</body> 

 
</html>


PHP:
<head> 

<title>Test Page</title> 

<style> 

 
* { font-family: "Arial", sans-serif; } 

 
#wrap { margin-top: 50px;text-align: center; } 

 
#barwrap { 

position: relative; /* to contain outer */ 

margin: 0 auto; /* to centre */ 

width: 250px;height: 20px; /* size of our bar - required */ 

text-align: left; 

font-weight: bold; 

border: 1px solid black; 

} 

 
#barwrap P { /* to contain text */ 

margin: 0; /* FF needs this or text drops below bar */ 

width: 250px; /* use this node to position text */ 

text-align: center; 

} 

 
#barwrap #outer { /* bar 'background' */ 

position: absolute; 

width: 100%; height: 100%; /* match parent size */ 

background: lightgreen; 

color: green; /* original colour of text */ 

} 

 
#barwrap #inner { 

position: relative; /* otherwise outer hides us */ 

width: 0; height: 100%; /* match parent */ 

overflow: hidden; /* to hide new text/prevent it wrapping */ 

background: green; 

color: lightgreen; /* colour of changed text */ 

} 

 
</style> 

 
<script> 

 
var time = 10000; // 10 secs 

var steps = 50; // Five per second 

var step = 1; 

 
function progress() { 

var bar = document.getElementById( "barwrap"); 

var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width 

var x = Math.round( aStep *step); 

var outer = document.getElementById( "outer"); 

var inner = document.getElementById( "inner"); 

 
// Work out seconds based on % progress from current step 

var secs = (( time /1000) -Math.floor( ( step /steps) *10)); 

 
inner.style.width = x +"px"; 

step++; 

 
// If 0 seconds, display waiting message instead 

outer.firstChild.innerHTML = ( secs? secs +" seconds...": "Please Wait..."); 

// Match text 

inner.firstChild.innerHTML = outer.firstChild.innerHTML; 

 
if( step > steps) redir(); 

else setTimeout( "progress();", time /steps); 

} 

 
function redir() { 

alert( "Redirecting now!"); 

} 

 
</script> 

</head> 

 
<body> 

 
<div id='wrap'> 

Progress: 

<div id='barwrap'> <!-- P wrappers for text positioning --> 

<div id='outer'><p></p></div> <!-- original colour/text --> 

<div id='inner'><p></p></div> <!-- new colour/text --> 

</div> 

 
<br> 

<a href='#' onClick='progress();'>Click here to start bar (only once please, you'll break it)</a> 

</div> 

 
</body> 

 
</html>
 
Benzer konular Forum Tarih
Ahbap HTML - CSS - XML 2 168
Ahbap HTML - CSS - XML 2 205

Benzer konular

SiyahLi

Yönetici
Co Admin
Katılım
2 Mayıs 2020
Mesajlar
3,442
Tepkime puanı
7
Takım
Beşiktaş
Teşekkürler
 

Nutella

Bayan Üye
Özel Üye
Katılım
2 Ocak 2021
Mesajlar
8,617
Tepkime puanı
8
Cinsiyet
  1. Bayan
Takım
Galatasaray
Paylaşım için teşekkürler.
 
İçerik sağlayıcı "paylaşım" sitelerinden biri olan Harbimekan.Com Forum, Eğlence ve Güncel Paylaşım Platformu Adresimizde 5651 Sayılı Kanun’un 8. Maddesine ve T.C.K’nın 125. Maddesine göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. Harbimekan.Com sitesindeki konular yada mesajlar hakkında yapılacak tüm hukuksal Şikayetler için info@harbimekan.com yada iletişim sayfası üzerinden iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 3 Gün (72 Saat) içerisinde Forum yönetimi olarak tarafımızdan gereken işlemler yapılacaktır.