Question

我正在尝试在CSS预加载器下面放置一些文本，该文本为“加载选项-这可能需要几秒钟...”

#loader {
  border: 16px solid rgba(255, 255, 255, 0.5);
  /* Light grey */
  border-top: 16px solid rgb(27, 40, 61);
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  margin-top: -60px;
  left: 50%;
  margin-left: -60px;
}

#loader:after {
  content: "Loading Options - This May Take A Few Seconds...";
  position: absolute;
  bottom: 100%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

<div id="search-overlay">
  <div id="loader"></div>
</div>

但是，这会导致文本随着加载程序旋转，而不是在其下方旋转。任何帮助将不胜感激！

Answer 1

只需创建一个新元素:)

用更多的CSS组合在一起，使其看起来更时髦。

#loader {
  border: 16px solid rgba(255, 255, 255, 0.5);
  /* Light grey */
  border-top: 16px solid rgb(27, 40, 61);
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin-bottom: 10px;
}

#loader:after {
  position: absolute;
  bottom: 100%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#search-overlay {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}

#loader-text {
  font-family: sans-serif;
  text-align: center;
 }

<div id="search-overlay">
  <div id="loader"></div>
  <div id="loader-text">Loading Options:<br> This may take a few seconds...</div>
</div>

Answer 2

您需要为此创建一个新元素。没有其他办法了。因为要旋转的是完整的元素集，而文本是旋转器的内容。

Answer 3

您可以通过flex显示来实现这种目的。

:after伪类仍然属于#loader，因此在设置#loader的动画时您不能阻止它旋转。

您需要创建一个新元素来处理此类消息。

此外，使用位置absolute和负边距值并不是真正的最佳实践。我不知道上下文，但是您必须使用这种组合，但是我认为仅使用top和left值就足够了。

#loader {
  border: 16px solid rgba(255, 255, 255, 0.5);
  /* Light grey */
  border-top: 16px solid rgb(27, 40, 61);
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#search-overlay {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  
}

<div id="search-overlay">
  <div id="loader"></div>
  <span class="loading-message">Loading Options - This May Take A Few Seconds...</span>
</div>

将文字放在CSS预载器下方

3 个答案: