css - 带图标的引导进度条
问题描述
到目前为止,我采用了这个解决方案:
<div class="d-block w-100">
<div class="progress">
<i class="bi bi-arrow-down-circle"></i>
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<i class="bi bi-arrow-down-circle"></i>
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<i class="bi bi-arrow-down-circle"></i>
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<i class="bi bi-arrow-down-circle"></i>
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<i class="bi bi-arrow-down-circle"></i>
</div>
</div>
但我认为必须有更好的解决方案。欢迎任何建议。PS:不要介意图标。
解决方案
由于引导程序没有进度/步进功能,您需要使用一些第三方库来实现这一点。
访问下面的链接以了解步进器的工作原理,他们也有示例代码,使用它并自定义
推荐阅读
- docker - 无法绑定80端口
- ios - 从 iOS 上的 Flutter 应用打开 youtube 应用
- python - 如何在 Flask 和 HTML 中忽略 render_template 参数中的特殊字符
- bash - Bash 字符串比较在 BusyBox 上不起作用
- html - 如何垂直对齐 div 内的多个 inline-block 元素?(反应)
- javascript - 我有一个 vuejs 代码库,我想将其转换为 reactjs,但我遇到了问题
- python - Pyspark - 带有日期列的 DataFrame.summary() 方法的奇怪行为
- html - 如何在表单中定位 div 类?
- c++ - 以 clang 格式对齐函数声明
- javascript - 无法将上传的图像保存到 Hapi.js 中的数据库