HTML&CSS ：炫酷的进度条动画

玄之 · 发表于昨天 09:04

这段代码实现了一个具有动态背景、颜色变化和3D阴影的进度条动画。它不仅模拟了加载进度，还通过丰富的视觉效果增强了用户体验。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.progress {
--progress-color: rgb(184, 20, 255);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
z-index: 9999;
height: 1.25rem;
width: 200px;
border-radius: 6px;
outline: 1.5px solid #6a6a6b;
border: 2px solid transparent;
overflow: hidden;
transition: all 125ms ease;
animation: outline 4s ease infinite;
background-color: white;
box-shadow:
inset 0.2rem 0.2rem 0.5rem #b8b8b9,
inset -0.2rem -0.2rem 0.5rem #7c7c7c7c;
}
.progress::before {
content: "loading";
position: absolute;
font-weight: 600;
font-size: 14px;
z-index: 9;
animation: colors 4s ease infinite;
}
.bar {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transform-origin: left center;
animation: progress 4s ease infinite;
}
.bar::before {
content: "";
position: absolute;
inset: 0;
height: 100%;
width: 100%;
border-radius: 6px;
transform-origin: left center;
transition: all 125ms ease;
background-size: 1.25rem 1.25rem;
box-shadow:
inset 0.3rem 0.3rem 0.6rem #ffffff8f,
inset -0.2rem -0.2rem 0.5rem #77777777;
background-image: linear-gradient(45deg,
#cccccc33 25%,
transparent 0,
transparent 50%,
#cccccc33 0,
#cccccc33 75%,
transparent 0,
transparent);
animation: bar 1s linear infinite;
}
.bar::after {
content: "";
inset: 0;
height: 100%;
width: 100%;
border-radius: 4px;
background-color: var(--progress-color);
background: linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
}
@keyframes outline {
from {
outline-color: #6a6a6b;
}
50% {
outline-color: #fac826;
}
to {
outline-color: #fc466b;
}
}
@keyframes colors {
from {
color: #000;
}
to {
color: #fff;
}
}
@keyframes progress {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
@keyframes bar {
from {
background-position: 0 0;
}
to {
background-position: 2.5rem 0;
}
}
</style>
</head>
<body>
<div class="progress">
<div class="bar"></div>
</div>
</body>
</html>

复制代码

HTML 结构

progress：进度条的容器，包含整个进度条的样式和动画。
bar：进度条的内部元素，用于实现进度条的动态效果。

CSS 样式

body：设置页面背景颜色、布局方式（居中对齐）和全屏高度。
.progress：定义进度条的样式，包括大小、背景颜色、边框、阴影和动画效果。
.progress::before：在进度条上显示“loading”文本，并通过colors动画实现颜色变化效果。
.bar：定义进度条内部的动画效果，通过progress动画实现水平移动。
.bar::before：为进度条添加渐变背景和动态阴影效果，通过bar动画实现背景的滚动效果。
.bar::after：为进度条添加渐变背景颜色，从蓝色到红色的渐变。
@keyframes outline：定义进度条边框的颜色变化动画。
@keyframes colors：定义“loading”文本的颜色变化动画。
@keyframes progress：定义进度条的水平移动动画。
@keyframes bar：定义进度条背景的滚动动画。