这篇文章主要介绍“怎么使用JS和CSS实现加载进度条的效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用JS和CSS实现加载进度条的效果”文章能帮助大家解决问题。
软件:HBuilderX。
1. body 创建2个div,外部div添加id"progress"属性, 添加 id属性 。
<div id="progress"> <div id="progress-bar"></div> </div>
2.设置progress CSS样式。
设置宽度,高度,边框圆角,超过溢出处理,边框颜色等等属性。
#progress { width: 100%; height: 30px; position: relative; background-color: #ddd; border-radius: 10px; overflow: hidden; }
3.设置progress-bar CSS样式。
设置宽度,高度,行高,文字颜色,背景颜色等等属性。
#progress-bar { background-color: #d9534f; width: 10px; height: 30px; line-height: 30px; position: absolute; text-align: center; color: white; background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 40px 40px; }
4. 设置 创建两个按钮,添加点击事件。
<button onclick="start()">开始进度</button> <button onclick="stop()">结束进度</button>
5.start()方法,添加定时器。
function start() { t = setInterval(progress, 60); }
6.判断当进度条到100%时,停止定时器,没有到达,再执行方法。
function progress() { if (i < 100) { i++; bar.style.width = i + "%"; bar.innerHTML = i + " %"; } else { clearInterval(t); } }
7. 设置stop()方法,移除定时器, 停止执行。
function stop() { clearInterval(t); }
8. 调用方法,实现效果。
关于“怎么使用JS和CSS实现加载进度条的效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。