前言
对于网页设计过程中的进度条，它通常用来显示网站的加载进度、文件上传进度和表单填写进度等。然而，如果仅仅使用默认的进度条，显得十分平凡且缺乏吸引力。因此，网页设计师们开始尝试着为进度条做一些美化处理，以使网站更具吸引力。
效果图
CSS文件
进度条的美化主要是通过css进行装饰，大家在网站的静态文件目录创建一个文件叫progressbar.css，将下面的代码复制到创建的文件里面随后保存，我们进行下一步的操作。
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
margin: 0;
z-index: 99999;
background-color: #999;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
}
/* 运用渐变色实现 */
.gradient {
background: linear-gradient(to right, #FF0080, #FF8C00, #00FF7F);
}
/* 运用动画效果实现 */
.animation {
height: 5px;
background-color: #aaa;
opacity: .5;
animation: progress-animation 2s linear infinite;
}
@keyframes progress-animation {
0% {
transform: scaleX(0) translateX(-100%);
}
50% {
transform: scaleX(1) translateX(0%);
}
100% {
transform: scaleX(0) translateX(100%);
}
}
/* 运用彩虹色带实现 */
.rainbow {
height: 5px;
background: repeating-linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet);
animation: progress-animation2 5s infinite;
}
@keyframes progress-animation2 {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
h1, p {
margin: 20px;
}创建完成后进行文件的引入，我是在Joe主题的usr/themes/Joe/public/include.php进行的css文件的引入，引入的代码是：
Joe主题路径引入样式：
<link href="<?php _getAssets('assets/css/progressbar.css'); ?>" rel="stylesheet" />通用引入样式：
<link rel="stylesheet" href="/usr/themes/Joe/assets/css/progressbar.css">这里就不做太多的解释啦，大家都是有网站的人，引入这些简直就是轻轻松松。
JS文件
也是一样的，在主题的静态资源文件目录：/urs/themes/Joe/assets/js下创建一个名为jindutiao.js的文件，随后保存，把下面的代码复制到你创建的文件里面：
window.onload = function () {
var progressBar = document.createElement('div');
progressBar.classList.add('progress-bar', 'animation');
document.body.appendChild(progressBar);
}创建完js文件之后也是要去header.php文件或者include.php文件引入，引入代码:
Joe主题路径引入样式：
<script src="<?php _getAssets('assets/js/progressbar.js'); ?>"></script>通用引入样式：
<script src="/usr/themes/Joe/assets/js/progressbar.js"></script>div盒子
<!--进度条美化盒子版块渐变色-->
<!--<div class="progress-bar gradient"></div>-->
<!--进度条美化盒子版块动画---->
<!--<div class="progress-bar animation"></div>-->
<!--进度条美化盒子版块彩虹色------>
<div class="progress-bar rainbow"></div>把上面的代码放在header.php文件里面的最上面，需要用到的代码就把注释解开，不需要的要用注释给它注释掉，不然会出现BUG，具体是否出现bug还未尝试。
总结
在主题的静态资源目录创建需要的css文件和js文件，随后在head或joe主题的include里面引入js和css代码，引入完成后在主题的public/header.php中的顶部位置粘贴复制的div盒子代码，然后保存，访问自己的网站然后ctrl+f5强制刷新一下即可看见效果，访问本站也可以看到效果，本站使用的是彩虹色的进度条美化。
评论