CSS 仅旋转边框

Question

我想让三个圆形旋转器围绕文本旋转，并且这些旋转器内的文本将保持静止。

我只能通过参考.spinner-borderBootstrap 中的 CSS 来做到这一点。HTML 文件无法修改。

.loader-wrapper {

  position: fixed;

  width: 100%;

  height: 100%;

  text-align: center;

  z-index: 1;

}

@-webkit-keyframes spinner-border {

  to {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

@keyframes spinner-border {

  to {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

.loader {

  position: relative;

  left: auto;

  top: auto;

  width: 80px;

  font-size: 20px;

  text-align: center;

  display: inline-block;

  width: 10rem;

  height: 10rem;

  vertical-align: text-center;

  border: 0.25em solid currentColor;

  border-right-color: transparent;

  border-radius: 50%;

  -webkit-animation: spinner-border .75s linear infinite;

  animation: spinner-border .75s linear infinite;

}

<div class="loader-wrapper">

  <div class="loader">Loading</div>

</div>

我尝试先制作一个旋转器。但我不知道如何让文字保持静止。

Answer 1

.loader-wrapper {&nbsp; position: fixed;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; text-align: center;&nbsp; z-index: 1;}@-webkit-keyframes spinner-border {&nbsp; to {&nbsp; &nbsp; -webkit-transform: rotate(360deg);&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}@keyframes spinner-border {&nbsp; to {&nbsp; &nbsp; -webkit-transform: rotate(360deg);&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}.loader {&nbsp; position: relative;&nbsp; top: 5px;&nbsp; left: auto;&nbsp; width: 80px;&nbsp; font-size: 20px;&nbsp; text-align: center;&nbsp; display: inline-block;&nbsp; width: 10rem;&nbsp; height: 10rem;&nbsp; vertical-align: text-center;&nbsp;&nbsp;}.loader::after {&nbsp; content: '';&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: -10px;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; border: 0.25em solid currentColor;&nbsp; border-right-color: transparent;&nbsp; border-radius: 50%;&nbsp; -webkit-animation: spinner-border .75s linear infinite;&nbsp; animation: spinner-border .75s linear infinite;}<div class="loader-wrapper">&nbsp; <div class="loader">Loading</div></div>