一篇文章教会你使用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. 调用方法，实现效果。

四、效果展示

1、f12运行到chrome浏览器。

2、点击开始进度按钮，加载进度。显示进度加载情况。

3、加载到100% 停止定时器!

4、按钮结束进度按钮，停止定时器。直接从当前进度停止。

五、总结

本项目，事件监听遇到的一些难点进行了分析及提供解决方案。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
HTML+CSS也可以做出网站页面的效果，在上面显示图片标题的地方不能用绝对定位，于是用的relative定位，这个地方是布局的核心部分，否则无法将文字放在图片之上。
此进度条是DIV+CSS制作实现，通过对DIV宽度按照百分比来实现百分比进度条效果，大家可以将背景美化、边框美化实现自己需要的漂亮美化的进度条效果。
代码很简单，希望对你有所启发。

果图

在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。

用到的知识点：

1、transform：rotate；（旋转）

2、animation；（动画关键帧）

首先，我们创建一个box，作为父级容器，定宽定高（160px），定位（position：relative）;

.box{

width: 160px;

height: 160px;

margin: 200px auto;

position: relative;

}

圆形进度条，分为左右两部分，利用时间差，通过动画关键帧来达到进度效果。

接下来，我们首先实现左侧部分，创建一个div，类名为left-box，定宽定高（80px，160px）；定位（position：absolute）；

在left-box下创建一个div为子元素，类名为left-tran 和 left。接下来，设置left-tran样式。

我们要明白，进度条的实现是通过时间差，改变边框的颜色。通俗一点：就是一个div，width和height都为0px；边框宽度设为100%；然后top和left为一组，bottom和right为一组，分别设置不同的颜色。效果如下图：

接下来。将父级设置overflow：hidden。超出部分隐藏。这样就只显示一半的边框，随后便利用transform：rotate旋转45deg，边框边圆角得到最终效果，如下图：

最后设置关键帧，不同的边框颜色就会相互转变

这样。左侧的样式就已经完成，右侧的与之相似，这里，我们就不在这里多加描述。

待完成右侧样式，两个关键帧动画相互协调，就可以完成一个圆形进度条啦。

今天的全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 * {
 padding: 0px;
 margin: 0px;
 }
 .box {
 width: 200px;
 height: 200px;
 position: relative;
 margin: 100px auto;
 box-sizing: border-box;
 }
 .left-box{
 width: 100px;
 height: 200px;
 position: absolute;
 left: 0px;
 top: 0px;
 box-sizing: border-box;
 overflow: hidden;
 }
 .left-tran{
 width: 0px;
 height: 0px;
 border: 100px solid;
 box-sizing: border-box;
 transform: rotate(45deg);
 border-radius: 50%;
 
 }
 .left{
 border-left: 100px solid #e3e4e5;
 border-bottom: 100px solid #e3e4e5; 
 animation: leftmove 10s linear infinite;
 }
 @keyframes leftmove{
 0%{
 transform: rotate(45deg);
 }
 50%{
 transform: rotate(45deg);
 }
 100%{
 transform: rotate(225deg);
 }
 }
 .right-box{
 width: 100px;
 height: 200px;
 position: absolute;
 top: 0px;
 right: 0px;
 box-sizing: border-box;
 overflow: hidden;
 }
 .right-tran{
 width: 0px; 
 height: 0px;
 border: 100px solid;
 position: absolute;
 top: 0px;
 right: 0px;
 transform: rotate(45deg);
 border-radius: 50%;
 
 }
 .right{
 border-right: 100px solid #e3e4e5;
 border-top: 100px solid #e3e4e5;
 animation: rightmove 10s linear infinite;
 }
 @keyframes rightmove{
 0%{
 transform: rotate(45deg);
 }
 50%{
 transform: rotate(225deg);
 }
 100%{
 transform: rotate(225deg);
 }
 }
 
 </style>
</head>
<body>
 <div class="box">
 <div class="left-box">
 <div class="left-tran left"></div>
 </div>
 <div class="right-box">
 <div class="right-tran right"></div>
 </div>
 </div>
</body>
</html>

进度条，结合和时间戳，就可以很好的完成一个完美的时间进度条了。

希望今天的知识点对大家有所帮助。

享一个很酷炫的视频，通过滑动杆控制仪表进度显示，同时伴有灯光效果，看起来非常震撼。html非常简单，只有几个元素，使用了一个进度条滑动杆的控件。接下来我们重点来看一下CSS，从这里可以看到，页面长什么样子。

好的，现在来说一下滑动杆的样式，这是一个滑轨的样式，其他属性没有什么特别的，我们主要看一下这几个。

首先要自定义进度条的样式，box-shadow：因为这个控件浏览器默认会有一套自己的样式，只有把 shadow设为难才可以自定义模式，如果把这个样式去掉，那整个滑杆其它的样式全部都不起效了。

非常重要的是这两句的设置，这两句有什么用呢？当移动滑块时，大家注意滑轨，在滑块的左边它就会变成蓝色，滑块的右边还是黑色，无论移到什么地方都一样，主要用来控制这一个的。

接下来分析一下这两句，为什么背景这里用了两个颜色？第一个是渐变色，第二个是黑色。最主要的是渐变色里面的这两个颜色还是同一个，lwhite都是这一个变量，说白了它压根没有渐变的效果。

·box-shadow：为什么不直接用这个颜色而要把它搞成渐变？box-shadow：首先用两个颜色，是因为滑轨它就需要两个颜色，滑块的左边是蓝色，滑块的右边是黑色，这两个颜色。之所以会对同一个颜色做渐变，是因为需要配合boxsha一起来使用。

通常background-size是用来设置背景图显示的，对单一颜色是不起作用的。这里用线性渐变就相当于取巧。white用了一个小技巧，因为这里渐变的就是同一个颜色，和单一颜色没有区别，初始值设置为0100%，也就是这一个颜色。渐变的颜色开始是没有显示的，也就是现在这样子。

如果我们把它改一下，改成50%。第一个颜色就会显示到中间位置了，再改成90%，试一下。第一个颜色就会显示到后面了。

→当滑块移动的时候通过JS修改这一个值，是不是就可以动态同步滑轨的颜色状态了？这里先改回0，再看一下这个样式。s inputltype='range：webkit-lips thumb。这是一个滑块的样式，没有什么特别要说的，用的属性都很简单。

主要就来看一下这个伪元素，用这个伪元素就说明要修改的是滑块的样式。仅此而已。

→还有就是滑块的发光效果用的就是阴影，也就是这一个的样式。以下是清除中间显示百分比数字的样式，没有什么特别的，主要是中间发光的效果。后面两个是中间仪表盘的样式，但现在还没有span，需要通过JavaScript创建出来。样式很简单，没有特别的，我们来看看JS。现在已经获取了几个对象来做一个for循环，画出100个指针。我们需要通过JavaScript来创建这些span，因为这些span需要在图形的表盘上分布。这些span需要旋转一定的角度，然后再放入main中。现在表盘应该出来了，没有问题，但是似乎有些拥挤。我们需要修改CSS，将宽度设置为40个TB。将滑动杆向下移动25个TB。现在来看一下效果。现在来处理一下，当移动滑块时，颜色和中间的百分比会随之变化。实际上，这并不难，只需要监听滑杆的输入事件。我们需要修改滑轨的背景大小，只需将其水平方向的where复给百分号即可，而垂直方向则保持100%的宽度。

中间显示的百分比很简单，只需要将值给它就可以了。我们来看一下效果，移动滑块没有问题，滑轨的颜色和上面的百分比都跟着发生变化了。

接下来，我们需要写一个函数，当移动滑块时，改变仪表指针的颜色。我们需要循环所有的指针。当i小于传入的值时，我们需要设置前面一部分指针的颜色和属性。

首先，我们需要设置自定义的颜色bg。我们使用了CSS的色相饱和度函数，后面两个值代表饱和度和亮度，通常设置为100%和50%。这并不重要，我们需要设置色相。我们需要根据不同位置的指针设置不同的色相，这样颜色看起来会更加丰富。另外，我们还需要设置sg的颜色属性。

其他指针使用CSS中设置的黑色背景和透明sg。现在来看一下指针的颜色状态是否发生了变化，移动滑块，没有问题，可以跟着发生变化了。

这个视频到此结束，感谢大家的收看。

在线咨询

上一篇：当HTML页面加载就触发点击a标签
下一篇：前端开发：JavaScript 资源大全（二）