h5加载进度条 |
您所在的位置：网站首页 › h5进度条标签 › h5加载进度条 |
h5加载进度条
|
html代码 进度：0% 使用progress标签，设置好min和max数值。可以用value获取其中的进度值 js代码 function plan() { var proceed = document.getElementById('proceed') var planning = document.getElementById('planning') var timer = setInterval(function () { if (proceed.value !== 100) { proceed.value++ planning.innerHTML = '进度：' + proceed.value + '%' } else { planning.innerHTML = '加载完成' clearInterval(timer) } }, 100) } plan()效果如下 使用div模仿进度条 html代码 css代码 #wrapper { position: relative; width: 200px; height: 100px; border: 1px solid darkgray; } #progressbar { position: absolute; top: 50%; left: 50%; margin-left: -90px; margin-top: -10px; width: 180px; height: 20px; border: 1px solid darkgray; } /*在进度条元素上调用动画*/ #fill { animation: move 12s; text-align: center; background-color: #6caf00; } /*实现元素宽度的过渡动画效果*/ @keyframes move { 0% { width: 0; } 100% { width: 100%; } }js代码 var progressbar = { init: function () { var fill = document.getElementById('fill'); var count = 0; //通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置 var timer = setInterval(function (e) { count++; fill.innerHTML = count + '%'; if (count === 100) clearInterval(timer); }, 100); } }; progressbar.init();效果图 |
注意这里计时器的间隔要和css动画的执行时间要相对应【本文地址】
今日新闻 |
推荐新闻 |