效果
使用
这里提一下:使用的主题是:VSCode Lite Edit
使用方法:在思源笔记里面嵌入 HTML 代码块就可以了
目前支持以下六种颜色样式类(添加在 .progress-bar
上):
类名 | 颜色 | 示例 |
---|---|---|
red-progress |
🔴 红色 | <div class="progress-bar red-progress"> |
yellow-progress |
🟡 黄色 | <div class="progress-bar yellow-progress"> |
green-progress |
🟢 绿色 | <div class="progress-bar green-progress"> |
cyan-progress |
🟦 蓝绿 | <div class="progress-bar cyan-progress"> |
blue-progress |
🔵 蓝色 | <div class="progress-bar blue-progress"> |
gray-progress |
⚪ 灰色 | <div class="progress-bar gray-progress"> |
animation: loadingAnimation 10s infinite linear;
这个是用来调节动画控制的
.progress-bar
类中的 height
和 line-height
属性 是用来调节高度的
基本就这些
代码展示
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>多样式动态进度条示例</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
}
.progress-container {
width: 100%;
max-width: 100%;
margin: 10px auto;
/* 调整后的高度和行高 */
height: 25px;
line-height: 25px;
text-align: center;
color: white;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
}
.progress-bar {
height: 100%;
transition: width 0.3s ease-in-out;
animation: loadingAnimation 20s infinite linear;
}
@keyframes loadingAnimation {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.red-progress {
background: repeating-linear-gradient(-45deg, #ff0000, #ff0000 10px, #ff4d4d 10px, #ff4d4d 20px);
background-size: 200% 100%;
}
.yellow-progress {
background: repeating-linear-gradient(-45deg, #ffff00, #ffff00 10px, #ffcc00 10px, #ffcc00 20px);
background-size: 200% 100%;
}
.green-progress {
background: repeating-linear-gradient(-45deg, #00ff00, #00ff00 10px, #00cc00 10px, #00cc00 20px);
background-size: 200% 100%;
}
.cyan-progress {
background: repeating-linear-gradient(-45deg, #00ffff, #00ffff 10px, #00cccc 10px, #00cccc 20px);
background-size: 200% 100%;
}
.blue-progress {
background: repeating-linear-gradient(-45deg, #0000ff, #0000ff 10px, #3333ff 10px, #3333ff 20px);
background-size: 200% 100%;
}
.gray-progress {
background: repeating-linear-gradient(-45deg, #cccccc, #cccccc 10px, #aaaaaa 10px, #aaaaaa 20px);
background-size: 200% 100%;
}
</style>
</head>
<body>
<!-- 进度条实例 -->
<div class="progress-container">
<div class="progress-bar red-progress" style="width: 80%;">加载中...</div>
</div>
<div class="progress-container">
<div class="progress-bar yellow-progress" style="width: 40%;">加载中...</div>
</div>
<div class="progress-container">
<div class="progress-bar green-progress" style="width: 60%;">加载中...</div>
</div>
<div class="progress-container">
<div class="progress-bar cyan-progress" style="width: 80%;">加载中...</div>
</div>
<div class="progress-container">
<div class="progress-bar blue-progress" style="width: 90%;">加载中...</div>
</div>
<div class="progress-container">
<div class="progress-bar gray-progress" style="width: 100%;">完成</div>
</div>
</body>
</html>
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于