글

라벨이 로딩바인 게시물 표시

a simple loading spinner in javascript / 자바스크립트로 로딩스피너 만들기

<style> ul, li {list-style:none; margin:0; padding:0; display:block;} #loadingWrap {position:relative; width:90px; height:90px; /*border:1px solid pink;*/ margin:20% auto;} .circle {width:20px; height:20px; border-radius:50%; background-color:pink;} .c1 {position:absolute; top:0; left:50%; margin-left:-10px;} .c2 {position:absolute; top:25%; right:25%; margin-top:-10px; margin-right:-10px;} .c3 {position:absolute; top:50%; right:0; margin-top:-10px;} .c4 {position:absolute; bottom:25%; right:25%; margin-bottom:-10px; margin-right:-10px;} .c5 {position:absolute; bottom:0; left:50%; margin-left:-10px;} .c6 {position:absolute; bottom:25%; left:25%; margin-bottom:-10px; margin-left:-10px;} .c7 {position:absolute; top:50%; left:0; margin-top:-10px;} .c8 {position:absolute; top:25%; left:25%; margin-top:-10px; margin-left:-10px;} </style> <ul id="loadingWrap"> <li class="circle c1"></li> <li class="circl...

Simple loading bars in javascript / 자바스크립트로 심플 로딩바 만들기

<style> #loadingBar {width:0%; height:10px; background-color:pink; margin:0; padding:0;} </style> <div id="loadingBar"></div> <script>  var bar = document.getElementById("loadingBar");  window.onload= start; var i=0; function loading(){ i+=0.1; bar.style.width= i + "%"; if(i>=100){ clearInterval(timer); } } function start(){ timer= setInterval(loading, 5); } </script> -------------------------------------------------------------------------------------------------- <style> #loadingBar {width:0%; height:10px; background-color:pink; margin:0; padding:0;} </style> <div id="loadingBar"></div> <script>  var bar = document.getElementById("loadingBar");  window.onload= start; var i=0; function loading(){ i+=0.1; j = i * 0.1; bar.style.width= j + "%"; console.log(i); if(i==1000){ clearInterval(timer); } } func...

Show a loading bar and then move to another page in javascript / 로딩바를 보여주고 다른 페이지로 이동하는 자바스크립트 함수

<strong>3초후에는 네이버 홈페이지로 이동합니다</strong> <br/> <br/> <div id="loadingBar"></div> <style> #loadingBar {width:0px; height:20px; background-color:pink;} </style> <script> var redirecturl="http://naver.com" var pausefor=4 var bar = document.getElementById("loadingBar"); var i=0; function postaction(){ window.location=redirecturl; } setTimeout("postaction()", pausefor*1000) function loading(){ i++; bar.style.width= i + "px"; if(i==1000){ clearInterval(timer2); } } function start(){ timer2= setInterval(loading, 0.1); }  window.onload= start; </script> <style>