将加载div放在按钮上

Question

我想向按钮添加动画加载效果。但是我没有找到如何将这个div放在按钮中间。我不想使用绝对位置，因为此动画必须适合我所有的按钮（不同的宽度大小）

我希望动画覆盖按钮，但不要使按钮溢出。

我做了一个我想做的片段：动画不在按钮的中央。这是我的问题。

.btn{
   background-color: #36ba2c;
   border-color: #36ba2c;
   color: #fff;
   margin-left: 10px;
   font-size: 1em;
   border: 1px solid #36ba2c;
   line-height: 40px;
   padding: 0 15px;   
}

.actionsBas {
    margin-top: 20px;
}

.ld-spheres {
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    height: auto;
}

.ld-spheres div {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(54, 186, 43, 0.7);
  filter: invert(39%);
}
.ld-spheres div:nth-child(1) {
  animation: lds-ellipsis1 0.6s infinite;
}
.ld-spheres div:nth-child(2) {
  animation: lds-ellipsis2 0.6s infinite;
}
.ld-spheres div:nth-child(3) {
  left: 30px;
  animation: lds-ellipsis2 0.6s infinite;
}
.ld-spheres div:nth-child(4) {
  left: 59px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.1);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(29px, 0);
  }
}

<div class="actionsBas">
  <button type="button" class="btn">
    <div class="ld-spheres">
      <div></div> <div></div> <div></div> <div></div>
    </div>
    <span>Enregistrer</span>
  </button>
  <button type="button" class="btn">
    <div class="ld-spheres">
      <div></div> <div></div> <div></div> <div></div>
    </div>
    <span>Annuler</span>
  </button>
  <button type="button" class="btn">
    <div class="ld-spheres">
      <div></div> <div></div> <div></div> <div></div>
    </div>
    <span>Supprimer</span>
  </button>
</div>

预先感谢您的帮助

Answer 1

你很近。请查看内联注释以了解更改。

.btn{
   background-color: #36ba2c;
   border-color: #36ba2c;
   color: #fff;
   margin-left: 10px;
   font-size: 1em;
   border: 1px solid #36ba2c;
   line-height: 40px;
   padding: 0 15px; 
   position:relative;/*added this*/
   overflow:hidden;/*hide anything that flows outside*/
}

.actionsBas {
    margin-top: 20px;
}

.ld-spheres {
    position: absolute;/*made absolute*/
    top: 0;
    bottom: 0;
    right: -100px;/*negative so still centered on small buttons */
    left: -100px;/*as above*/
    width:80px;/*added fixed width*/
    height:20px;/*added fixed height*/
    margin:auto;/*added margin auto to center*/
}

.ld-spheres div {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(54, 186, 43, 0.7);
  filter: invert(39%);
  left:0;
}
.ld-spheres div:nth-child(1) {
  animation: lds-ellipsis1 0.6s infinite;
}
.ld-spheres div:nth-child(2) {
  animation: lds-ellipsis2 0.6s infinite;
}
.ld-spheres div:nth-child(3) {
  left: 30px;
  animation: lds-ellipsis2 0.6s infinite;
}
.ld-spheres div:nth-child(4) {
  left: 59px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.1);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(29px, 0);
  }
}

<div class="actionsBas">
  <button type="button" class="btn">
    <div class="ld-spheres">
      <div></div> <div></div> <div></div> <div></div>
    </div>
    <span>Enregistrer</span>
  </button>
  <button type="button" class="btn">
    <div class="ld-spheres">
      <div></div> <div></div> <div></div> <div></div>
    </div>
    <span>Tiny</span>
  </button>
  <button type="button" class="btn">
    <div class="ld-spheres">
      <div></div> <div></div> <div></div> <div></div>
    </div>
    <span>Supprimer</span>
  </button>
</div>