怎么使用JS+CSS实现一个简单加载进度条的效果
这篇文章主要介绍“怎么使用JS+CSS实现一个简单加载进度条的效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用JS+CSS实现一个简单加载进度条的效果”文章能帮助大家解决问题。
成都创新互联公司服务项目包括秀峰网站建设、秀峰网站制作、秀峰网页制作以及秀峰网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，秀峰网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到秀峰省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
一、前言
我们经常在网页上 ，游戏界面加载时会看到加载进度条的效果，我们往往会以为这些加载进度条的效果，很难实现。
二、项目准备
软件：HBuilderX。
三、项目实现
1. body 创建2个div，外部div添加id"progress"属性， 添加 id属性 。
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. 设置 创建两个按钮，添加点击事件。
开始进度 结束进度
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. 调用方法，实现效果。
四、效果展示
1、f12运行到chrome浏览器。
2、点击开始进度按钮，加载进度。显示进度加载情况。
3、加载到100% 停止定时器!
4、按钮结束进度按钮，停止定时器。直接从当前进度停止。
关于“怎么使用JS+CSS实现一个简单加载进度条的效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
网站栏目：怎么使用JS+CSS实现一个简单加载进度条的效果
标题URL：
http://cdweb.net/article/gjdhos.html
