웹 페이지의 진행 상태를 표시하기 위해 진행 막대를 애니메이션 처리합니다.

내 페이지 상단에 진행 막대가 있습니다. 웹 페이지 로딩 진행률을 막대에 표시하고 싶습니다. 전체 페이지가로드 될 때 막대가 100 %로 표시되기를 원합니다. 나는 '$ (window) .load();'의 변수를 나열해야한다는 것을 확신합니다. 그러나 나는 어디에 있는지 모른다.웹 페이지의 진행 상태를 표시하기 위해 진행 막대를 애니메이션 처리합니다.

내 코드 :

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>test</title> 
<style> 
progress { 
width: 100%; 
height: 5px; 
top: 0; 
left: 0; 
position: absolute; 
color: #1990c8; 
appearance: none; 
-webkit-appearance: none; 
-o-appearance: none; 
} 
progress::-moz-progress-bar { 
background: #1990c8; 
} 
progress::-webkit-progress-value { 
background: #1990c8; 
} 
progress::-webkit-progress-bar { 
background: #e1e1e1; 
} 
</style> 
</head> 
<body> 
<progress id="progressbar" value="0" max="100"></progress> 
<span id="status"></span> 
<script type="text/javascript" language="javascript"> 
function progressbaranimation(a) { 
var bar = document.getElementById('progressbar'); 
bar.value = a; 
a++; 
var sim = setTimeout("progressbaranimation("+a+")"); 
} 
var amount = 0; 
progressbaranimation(amount); 
</script> 
<img src="http://media.npr.org/images/picture-show-flickr-promo.jpg"> 
<img src="http://dd508hmafkqws.cloudfront.net/sites/default/files/mediaimages/gallery/2012/Dec/AA-502716%20(1).jpg"> 
</body> 
</html>

출처

2013-08-12 sirweatha

당신은 기본적인 자바 스크립트와 함께이 작업을 수행 할 수 있습니다. (http://meta.stackoverflow.com/tags/link-only-answers/info)는 낙담 [링크 전용 답변], SO 답변 검색의 엔드 포인트가 될 것을 확인이 http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/

출처

2013-10-06 09:49:22 Manish

주 해결책을 찾는다. (시간이 지남에 따라 부실 해지는 경향이있는 또 다른 중간 기착 (stopover)). 링크를 참조 용으로 유지하면서 독립형 시놉시스를 여기에 추가하는 것을 고려해보십시오. – kleopatra

웹 페이지의 진행 상태를 표시하기 위해 진행 막대를 애니메이션 처리합니다.

답변

관련 문제