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 {

  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;

  top: 5px;

  left: auto;

  width: 80px;

  font-size: 20px;

  text-align: center;

  display: inline-block;

  width: 10rem;

  height: 10rem;

  vertical-align: text-center;

  

}

.loader::after {

  content: '';

  position: absolute;

  left: 0;

  top: -10px;

  width: 100%;

  height: 100%;

  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>