html - 在 CSS 预加载器下方放置文本
问题描述
我试图在我的 CSS 预加载器下方居中放置一些文本,上面写着“加载选项 - 这可能需要几秒钟......”
#loader {
border: 16px solid rgba(255, 255, 255, 0.5);
/* Light grey */
border-top: 16px solid rgb(27, 40, 61);
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
margin-top: -60px;
left: 50%;
margin-left: -60px;
}
#loader:after {
content: "Loading Options - This May Take A Few Seconds...";
position: absolute;
bottom: 100%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div id="search-overlay">
<div id="loader"></div>
</div>
但是,这会导致文本随着加载器旋转,而不是在其下方静止。任何帮助将不胜感激!
解决方案
只需制作一个新元素:)
将它与更多的 CSS 结合起来,让它看起来更时髦。
#loader {
border: 16px solid rgba(255, 255, 255, 0.5);
/* Light grey */
border-top: 16px solid rgb(27, 40, 61);
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin-bottom: 10px;
}
#loader:after {
position: absolute;
bottom: 100%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#search-overlay {
position: relative;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
#loader-text {
font-family: sans-serif;
text-align: center;
}
<div id="search-overlay">
<div id="loader"></div>
<div id="loader-text">Loading Options:<br> This may take a few seconds...</div>
</div>
推荐阅读
- python - 无法从 pycharm 引用 PyQt5
- linux - bash set -e (errexit) 仅适用于管道中的最后一个命令?
- applescript - 期待结束,但继续寻找
- excel - 希望 Excel 宏在新添加的工作表上自动运行
- java - 在 jlabel 中制作打字机效果
- excel - 如何格式化 .txt 文件中的列?
- amazon-web-services - EBS FFMPEG 未从 ebexentsions 安装
- angular - 在 Angular 中设置 Tailwind 后,全局 scss 变量导入不再起作用
- html - 有没有办法解决我的网站上与第三方标签相关的可访问性问题?
- c++ - 显式复制构造函数的行为