我必须把这个加载器放在我的网站上，但它没有出现在中心，你能告诉怎么做吗？对不起，如果它是如此愚蠢，但我不能弄明白这一点，我尝试过改变位置从绝对到相对和改变位置，但它没有工作。
HTMLHere
<span class="loader"></span>
此处为CSS
.loader {
width: 16px;
height: 16px;
box-shadow: 0 30px, 0 -30px;
border-radius: 4px;
background: currentColor;
display: block;
margin:auto;
position: relative;
color: #FFF;
transform: translateY(30px);
box-sizing: border-box;
animation: animloader 2s ease infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 16px;
height: 16px;
box-shadow: 0 30px, 0 -30px;
border-radius: 4px;
background: currentColor;
color: #FFF;
position: absolute;
left: 30px;
top: 0;
animation: animloader 2s 0.2s ease infinite;
}
.loader::before {
animation-delay: 0.4s;
left: 60px;
}
@keyframes animloader {
0% {
top: 0;
color: white;
}
50% {
top: 30px;
color: rgba(255, 255, 255, 0.2);
}
100% {
top: 0;
color: white;
}
}
方法是制作一个宽度为100%，高度为100%的DIV来包围跨度。在你的动画中做到“50%”
因此，请尝试以下操作:（如果您觉得可以，请从div中删除
<div style="height:100%;vertical-align:middle;text-align:center;width:100%;border:1px solid black;">
<span class="loader"><span style="color:red;">TEST</span></span>
</div>
<style>
.loader {
width: 16px;
height: 16px;
box-shadow: 0 30px, 0 -30px;
border-radius: 4px;
background: currentColor;
display: block;
margin:auto;
position: relative;
color: #FFF;
transform: translateY(30px);
box-sizing: border-box;
animation: animloader 2s ease infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 16px;
height: 16px;
box-shadow: 0 30px, 0 -30px;
border-radius: 4px;
background: currentColor;
color: #FFF;
position: absolute;
left: 30px;
top: 0;
animation: animloader 2s 0.2s ease infinite;
}
.loader::before {
animation-delay: 0.4s;
left: 60px;
}
@keyframes animloader {
0% {
top: 0;
color: white;
}
50% {
top: 50%;
color: rgba(255, 255, 255, 0.2);
}
100% {
top: 0;
color: white;
}
}
</style>
