站长图库向大家介绍了Bootstrap组件,加载效果,读取图标组件等相关知识,希望对您有所帮助
Bootstrap中怎么实现加载效果？下面本篇文章就来给大家介绍一下Bootstrap5读取图标（Spinners）组件的用法，看看怎么读取图标来表示元件加载状态，希望对大家有所帮助！
1 简单的读取图标
使用Bootstrap读取图标以表示元件加载状态，这些读取图标完全使用HTML，CSS，而没有使用到JavaScript。它们的外观、对齐以及尺寸都可以通过通用类来自定义,但您仍需要客制JavaScript来切换它们的显示状况。
下面是一个简单的读取图标
<!doctype html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>读取图标</title> </head> <body> <div> <br><br><br><br> <div role="status"> <span>Loading...</span> </div> </div> </body></html>
2 颜色
边框读取图标使用currentColor来当作它的border-color，这代表你可以使用文字颜色通用类别来自定义它的颜色。你可以在标准的读取图标上使用任何通用类别中的颜色。
<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-border text-secondary" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-border text-success" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-border text-danger" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-border text-warning" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-border text-info" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-border text-light" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-border text-dark" role="status"> <span class="visually-hidden">Loading...</span></div>
3 渐变读取图示
如果你不喜欢边框读取图标，可以切换到渐变读取图标。虽然技术上来说，它不会旋转，但它会反复渐变显示！ 渐变图标也支持不同的颜色。
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span></div>
同上，这个读取图标也使用currentColor，所以你可以轻易地使用文字颜色通用类别来改变它的外观。这边是蓝色，以及它所支持的颜色变化。
<div class="spinner-grow text-primary" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-grow text-secondary" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-grow text-success" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-grow text-danger" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-grow text-warning" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-grow text-info" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-grow text-light" role="status"> <span class="visually-hidden">Loading...</span></div><div class="spinner-grow text-dark" role="status&q