PHP 또는 HTML 용 텍스트 기반 진행률 표시 줄

Question

안녕하세요 저는 "====="을 (를) 실행하고 백분율을 제공하여 진행률을 표시하는 텍스트 기반 진행률 막대를 찾고 있습니다. 이 http://scott.sherrillmix.com/blog/programmer/progress-bars-in-r/

하지만 같은 진행률 표시 줄과 유사

는 ======================

아래는

처럼, PHP에 있어야합니다 ======================= 99 우리가 클릭하여 제출하면 우리는 페이지를 새로 고치거나 할 때 진행 표시 줄이 페이지 로딩의 진행 상황을 표시해야

% 웹 페이지의 아무 버튼이나 누릅니다.

Answer 1

나는 당신이 그렇게 원하는 php, html 또는 웹 페이지에 사용할 수있는 jquery 및 css으로이 일을 처리해야합니다 생각합니다.

<div id="content"> 
    <h1>Preloading site</h1> 
    <ul> 
     <li><img src="images/a.jpg" alt="Flower" /></li> 
     . 
     . 
     . 
     <li><img src="images/z.jpg" alt="Flowers" /></li> 
    </ul> 

</div> 

CSS :

body { 
    background-color: #000; 
    margin: 0px; 
    padding: 0px; 
    background-image: url(../images/lotus.jpg); 
    background-position: 50% 50%; 
    background-attachment: fixed; 
    font-family: sans-serif; 
    font-size: 14px; 
} 

p { 
    line-height: 1.4em; 
} 

img{ 
    max-width:100%; 
} 

body #content { 
    width: 800px; 
    padding: 20px; 
    background-color: rgba(255,255,255,.6); 
    margin: 20px auto; 
    overflow: hidden; 
} 

h1{ 
    font-family: georgia; 
    font-style: italic; 
    color:maroon; 
} 

body ul { 
    padding: 0px; 
    margin: 0px; 
} 

body ul li { 
    display: block; 
    list-style-type: none; 
    float: left; 
    width: 400px; 
    height: auto; 
    overflow: hidden; 
    text-align: center; 
} 

body ul li.gradient { 
    padding: 20px; 
    width: 360px; 
    height: 227px; 

    background: #efc5ca; /* Old browsers */ 
    background: -moz-linear-gradient(top, #efc5ca 0%, #ef2f43 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efc5ca), color-stop(100%,#ef2f43)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* IE10+ */ 
    background: linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efc5ca', endColorstr='#ef2f43',GradientType=0); /* IE6-9 */ 
} 
#loaderMask{ 
    text-align: center; 
    padding-top: 20%; 
} 
#loaderMask span{ 
    padding: 20px; 
    float:left; 
    font-size: 12px; 
    font-weight:bold; 

} 

스크립트 :

이

내 솔루션 DEMO LINK

HTML입니다

$(document).ready(function() { "use strict" //indexOf is not supported by IE9>. if (!Array.prototype.indexOf){ Array.prototype.indexOf = function(elt /*, from*/){ var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len; for (; from < len; from++){ if (from in this && this[from] === elt) return from; } return -1; }; } var bgImg = [], img = [], count=0, percentage = 0; //Creating loader overlay $('<div id="loaderMask"><span>0%</span></div>').css({ position:"fixed", top:0, bottom:0, left:0, right:0, background:'#fff' }).appendTo('body'); //Searching all elemnts in the page for image $('*').filter(function() { var val = $(this).css('background-image').replace(/url\(/g,'').replace(/\)/,'').replace(/"/g,''); var imgVal = $(this).not('script').attr('src'); if(val !== 'none' && !/linear-gradient/g.test(val) && bgImg.indexOf(val) === -1){ bgImg.push(val) } if(imgVal !== undefined && img.indexOf(imgVal) === -1){ img.push(imgVal) } }); var imgArray = bgImg.concat(img); $.each(imgArray, function(i,val){ //Adding load and error event $("<img />").attr("src", val).bind("load", function() { completeImageLoading(); }); $("<img />").attr("src", val).bind("error", function() { imgError(this); }); }) function completeImageLoading(){ count++; percentage = Math.floor(count/imgArray.length * 100); $('#loaderMask').html('<span>'+percentage + '%'+'</span>'); for (var i = 0; i < percentage; i++) { $('#loaderMask span').append("="); } if(percentage === 100){ $('#loaderMask').html('<span>100%</span>') $('#loaderMask').fadeOut(function(){ $('#loaderMask').remove() }) } } //Error handling function imgError (arg) { $('#loaderMask').html("Image failed to load.. Loader quitting..").delay(3000).fadeOut(1000, function(){ $('#loaderMask').remove(); }) } });