进度条的重要性
进度条，就是我们经常看到的那个小圈圈，它在很多需要等待完成的事情里很关键！对咱们用户来说，这个进度条能很好地纾解因为等待而产生的烦躁和无聊情绪，感觉就像自己正在做点什么，提升了用起来的感觉。就算没有进度条，我们可能也会觉得迷茫，甚至直接关掉应用。所以说，搞个好看还好用的进度条真的很重要！
HTML结构设计
0%
构建进度条，HTML结构规划得好重要！拿`p.loadBar`举例，里面有个`p`标签表示进度条整体，然后加个`span`用来呈现进度，还能调动大小显示进度进度。再加上个`i`标签，给进度条添加点背景色，变出渐变色效果。总的来说，HTML结构弄清爽些，别乱七八糟，方便后续用CSS样式和JS做交互。
CSS样式设置
进度条好看又动感全靠CSS搞定！我们要用position: relative和absolute属性搭个架子，再用渐变色让颜色随着进度慢慢变深或浅。比如，从最左边到最右边，每25%的地方换个色，像这样：0-25%换成#7ed047，25%-50%换成#4ea018。然后，通过调背景大小让进度条看起来够宽大，整个页面会更美~
JS交互设计
body
{
font-family: Thoma, Microsoft YaHei, 'Lato', Calibri, Arial, sans-serif;
}
#content
{
margin: 120px auto;
width: 80%;
}
.loadBar
{
width: 600px;
height: 30px;
border: 3px solid #212121;
border-radius: 20px;
position: relative;
}
.loadBar p
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.loadBar p span, .loadBar p i
{
box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);
width: 0%;
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
}
.loadBar p i
{
width: 100%;
-webkit-animation: move .8s linear infinite;
background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);
background-size: 40px 40px;
}
.loadBar .percentNum
{
position: absolute;
top: 100%;
right: 10%;
padding: 1px 15px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
border: 1px solid #222;
background-color: #222;
color: #fff;
}
@-webkit-keyframes move
{
0%
{
background-position: 0 0;
}
100%
{
background-position: 40px 0;
}
}
除了好看之外，我们还得关注进度条的动态变化。用LoadBar这个东西，里面有两个方法能设定最大化进度和现在的进度，这样就能随心所欲地调整进度了。比如说，下个大文件的话，最大进度就设成文件大小，然后当前进度就跟着已经下载的部分走。这下在等的时候，用户就可以知道自己做到什么地步了，也清楚还要花多久才能把事情做完咯。
测试与优化
写完代码记得赶紧测试！在各种可能的情景下试试看，看看效果如何，也方便调整和修复。有啥问题，立马改正代码逻辑和样式展示，确保进度条能顺畅运作并达到预想成果。
扩展应用场景
不仅仅是下东西和删巨量任务那种普通情况，炫酷进度条在浏览器载入过程里也挺有用。页面加载的时候来个花哨的进度条图画，既能抓住用户眼球又能告诉大家网络状况咋样。特别是HTML5做手机排版的网站，用这种进度条在手机上效果会更好！
用户体验与产品价值
大家都知道，一个滑动起来顺溜、一眼就能看出意思、还挺好玩儿的进度条能让我们更好地了解怎么用这个产品，同时也会觉得这玩意儿很靠谱。所以说，在做设计时别忘了关注细节，多想想如何弄出新意来，这样才真正值钱！
未来发展趋势
科技进步，我们的要求也越来越高了！炫酷进度条以后可要越来越智能，更贴合咱们的需求。比如，用人工智能来呈现最适合你的效果，或者根据你的使用习惯来控制下载速度这些牛逼的功能都会有的。而且，跨平台应用的创新点会有很多惊喜等待着大家。
function LoadingBar(id)
{
this.loadbar = $("#" + id);
this.percentEle = $(".percent", this.loadbar);
this.percentNumEle = $(".percentNum", this.loadbar);
this.max = 100;
this.currentProgress = 0;
}
LoadingBar.prototype = {
constructor: LoadingBar,
setMax: function (maxVal)
{
this.max = maxVal;
},
setProgress: function (val)
{
if (val >= this.max)
{
val = this.max;
}
this.currentProgress = parseInt((val / this.max) * 100) + "%";
this.percentEle.width(this.currentProgress);
this.percentNumEle.text(this.currentProgress);
}
};
。
评论0