在同一行显示 CSS 加载程序和文本
Display CSS loader and text on the same line
我有一个自定义 CSS 加载器动画,我想在同一行的文本元素旁边显示它,但到目前为止我还没有成功。
#loader{
display:none;
}
#loader.active{
display:block;
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid black;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: black transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p class="mytext"> LOADING </p>
<div id="loader">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
如何在同一行的 'mytext' 元素右侧显示动画?
您可以将两个元素包装在一个 div
中,我们将给它一个 class 名称 'flex':
<div className="flex">
<p className="mytext"> LOADING </p>
<div class="loader">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
然后将 CSS 属性 添加到 div:
.flex {
display: flex;
align-items: center;
}
这应该按照您的需要对齐它们。
大多数浏览器默认 p
和 div
元素是 display: block;
。要将它们并排显示,请将 .mytext
和 #loader.active
display
属性 设置为 inline-block
.
.mytext {
display: inline-block;
}
#loader.active {
display: inline-block;
}
这将使它们彼此相邻。您还可以使用 width
、max-width
或 min-width
属性调整每个宽度。使用 vertical-align
对齐元素顶部、中间和底部。
我有一个自定义 CSS 加载器动画,我想在同一行的文本元素旁边显示它,但到目前为止我还没有成功。
#loader{
display:none;
}
#loader.active{
display:block;
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid black;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: black transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p class="mytext"> LOADING </p>
<div id="loader">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
如何在同一行的 'mytext' 元素右侧显示动画?
您可以将两个元素包装在一个 div
中,我们将给它一个 class 名称 'flex':
<div className="flex">
<p className="mytext"> LOADING </p>
<div class="loader">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
然后将 CSS 属性 添加到 div:
.flex {
display: flex;
align-items: center;
}
这应该按照您的需要对齐它们。
p
和 div
元素是 display: block;
。要将它们并排显示,请将 .mytext
和 #loader.active
display
属性 设置为 inline-block
.
.mytext {
display: inline-block;
}
#loader.active {
display: inline-block;
}
这将使它们彼此相邻。您还可以使用 width
、max-width
或 min-width
属性调整每个宽度。使用 vertical-align
对齐元素顶部、中间和底部。