? 本张页面由我做的一个个人网站而来，静态页面，编码简单，希望对你有用。不喜勿喷，感谢。废话不多说，直接上图。(注：进度条可以参考参考！)
HTML部分
? 网站小图标！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Refresh" content="5.5;URL=second.html">
<!-- 网页自动跳转，5.5为过度时间，URL为目标页面 -->
<link rel="shortcut icon" href="./img/logo.png" type="image/x-icon">
<!-- 网站小图标，href链接本地图片地址 -->
<link rel="stylesheet" href="./css/buffer.css" type="text/css">
<!-- css外部链接，href链接css文件本地地址 -->
<script src="./js/buffer.js"></script>
<!-- js外部链接，src链接js文件本地地址 -->
<title>Buffer</title>
</head>
<body>
<div class="box">
<div class="head">
<img src="./img/buffer.png">
<!-- 自定义图片,我这个是酒桶,src图片地址 -->
<div class="shadow">
<!-- 阴影部分 -->
<span></span>
</div>
<div class="load">
<p>Loading</p>
<!-- 加载文字 -->
<span></span>
<span></span>
<span></span>
</div>
<div class="bar">
<!-- 进度条 -->
<span id="j"></span>
<div id="num">0%</div>
</div>
</div>
</div>
</body>
</html>css部分(buffer.css)
* {
margin: 0;
padding: 0;
}
/* 全局属性设置 */
html {
width: 100%;
height: 100%;
background-color: rgba(255, 251, 45, 0.856);
}
/* 设置背景颜色 */
.box {
width: 40%;
margin: auto;
}
/* 设置box的大小和位置 */
.head {
width: 150px;
height: 150px;
margin: 200px auto;
}
.head img {
width: 100%;
position: relative;
top: 15px;
animation: tiao 2s infinite linear;
/* 对图片设置动画：animation: name 时间 无限循环 */
}
@keyframes tiao {
0% {
transform: translateY(-25px) scale(1.1);
/* 图片相较于原位置Y轴偏移量 scale为缩放属性 */
}
25% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(25px) scale(0.9);
}
75% {
transform: translateY(0px) scale(1);
}
100% {
transform: translateY(-25px) scale(1.1);
}
}
.shadow {
width: 150px;
height: 11px;
margin: auto;
position: relative;
top: 30px;
}
.shadow span {
display: block;
width: 50%;
height: 62%;
margin: auto;
background: #9b9b9b3d;
border-radius: 50%;
animation: shadow 2s infinite linear;
}
/* 阴影的属性以及动画设置 */
@keyframes shadow {
0% {
width: 52%;
}
25% {
width: 32%;
}
50% {
width: 12%;
}
75% {
width: 32%;
}
100% {
width: 52%;
}
}
.load {
display: block;
width: 150px;
line-height: 20px;
/* 行高 */
letter-spacing: 5px;
/* 字间距 */
border-radius: 18px;
/* 圆角设置 */
position: relative;
top: 70px;
margin: auto;
font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman‘, serif;
font-weight: bold;
font-size: 17.5px;
}
.load p {
width: 95px;
animation: typing 1s steps(22), blink 2s infinite linear;
display: inline-block;
background-image: linear-gradient(to top right, rgb(27, 209, 255), rgb(236, 29, 255));
/* 渐变颜色，对角 */
-webkit-background-clip: text;
color: transparent;
}
/* loading渐变字体，依次输出动画 */
@keyframes typing {
from {
width: 0;
}
}
.load span {
display: inline-block;
background-image: linear-gradient(to top right, rgb(27, 209, 255), rgb(236, 29, 255));
width: 3px;
height: 3px;
margin-left: 3px;
border-radius: 50%;
animation: dian 2.2s infinite linear;
}
/* 设置点的属性 */
@keyframes dian {
0% {
transform: scale(1);
opacity: 0;
}
25% {
transform: scale(1.6);
opacity: 0.6;
}
50% {
transform: scale(2);
opacity: 1;
}
75% {
transform: scale(1.6);
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.load span:nth-child(2) {
/* class名 span的第二个孩子 */
animation-delay: 0.8s;
/* 延时动画属性 */
}
.load span:nth-child(3) {
animation-delay: 1.6s;
}
.bar {
width: 150px;
height: 15px;
border-radius: 15px;
margin: 120px auto;
border: 1px solid rgba(25, 0, 255, 0.692);
}
/* 加载进度条框设置 */
.bar span {
display: block;
width: 0px;
height: 15px;
border-radius: 14px;
background-image: linear-gradient(to top right, rgba(0, 255, 115, 0.322), rgba(8, 239, 255, 0.623), rgba(157, 255, 0, 0.548));
animation: bar 4s linear;
animation-fill-mode: forwards;
/* none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */
}
/* span标签填充进度条 */
@keyframes bar {
0% {
width: 0%;
}
25% {
width: 25%;
}
50% {
width: 50%;
}
75% {
width: 75%;
}
100% {
width: 100%;
}
}
#num {
font-size: 14px;
display: inline;
position: relative;
left: 62px;
bottom: 18px;
z-index: 1;
color: rgb(0, 144, 155);
}
/* 百分比属性 */JS部分(buffer.js)
window.onload = function() //窗口打开即开始加载
{
var num = document.getElementById("num");
var width = 0;
var id = setInterval(frame,40); //定义id，用40毫秒调用frame的值,这里的时间和进度条span填充有关，当百分比为加到100时，颜色填充完毕。
function frame () {
if (width>=100) {
clearInterval(id) //判断，如果宽度大于或等于100，清除
} else{
width++;
num.innerHTML = width * 1 + "%" //在网页中写出百分比的值
}
}
}注：若代码有什么瑕疵，可以告诉我，谢谢！
原文：https://blog.51cto.com/u_15182994/2736310