引导按钮和加载动画

Posted 2023-03-06

【中文标题】引导按钮和加载动画

【英文标题】：Bootstrap button & loading animation

【发布时间】：2020-02-11 00:16:53

【问题描述】：

我在引导按钮中添加了加载动画，但它没有正确显示。

我已经使用类“加载器”向按钮添加了一个 div。但是按钮下方显示的是加载动画。

如何通过响应式设计解决它

这里是代码笔：https://codepen.io/ayxano/pen/oNNxgQx

.loader,
.loader:before,
.loader:after 
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;

.loader 
  color: #ffffff;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;

.loader:before,
.loader:after 
  content: '';
  position: absolute;
  top: 0;

.loader:before 
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;

.loader:after 
  left: 3.5em;

@-webkit-keyframes load7 
  0%,
  80%,
  100% 
    box-shadow: 0 2.5em 0 -1.3em;
  
  40% 
    box-shadow: 0 2.5em 0 0;
  

@keyframes load7 
  0%,
  80%,
  100% 
    box-shadow: 0 2.5em 0 -1.3em;
  
  40% 
    box-shadow: 0 2.5em 0 0;
  

【参考方案1】：

问题在于盒子阴影。您正在使用 2.5em 的 y 偏移量。

在这种特殊情况下尝试下面的 CSS：

.center-block.loader 
    top: -2.5em;