js实现页面加载颜色渐变进度条

来源：互联网发布：淘宝卖家最高级别店铺编辑：程序博客网时间：2024/05/22 21:18

标签：

<div class="progress"> <div class="progress-val" id="bar_width">100%</div>     <div class="progress-bar">        <span class="progress-in" id="bar" style="width:0%"></span>    </div></div>

样式表：

.progress {  width: 90%;  height: 34px;  position: relative;  margin: 10px auto;  display: inline-grid;  top: -35px;}.progress-val {  margin-left: 15px;  font: bold 15px/34px Helvetica, Arial, sans-serif;  color: #2368ca;  text-shadow: 0 1px rgba(255, 255, 255, 0.6);  width: 10%;  position: relative;  height: 20px;  left:78%;  top: 8px;}.progress-bar {  width: 90%;  display: block;  overflow: hidden;  height: 12px;  margin:0 auto;  line-height: 12px;  background: #2067c5;  border-radius: 4px;  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);  position: relative;}.progress-in {  display: block;  min-width: 8px;  height: 12px;  background: #2067c5;  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #2067c5, #24c1fc);  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #2067c5, #24c1fc);  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #2067c5, #24c1fc);  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #2067c5, #24c1fc);  border-radius: 4px;  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);}

js:

<script type="text/javascript">  var timer = null;  window.onload = function(){      timer = setInterval(function(){          progress();      },20)  }  function progress(){      var oDiv = document.getElementById("bar");      var bar_w = document.getElementById("bar_width");      oDiv.style.width =parseInt(oDiv.style.width) + 1 + "%";      bar_w.innerHTML = oDiv.style.width;    /*  console.log(parseInt(oDiv.style.width))*/      if(oDiv.style.width == "100%"){          clearInterval(timer);          /*window.location.href="m_index.html";*/      }  }</script>

0 0