具有静态文本的CSS旋转器

huangapple
go评论94阅读模式
英文:

CSS-Spinner with static text inside

问题

我尝试创建一个使用CSS实现的非常简单的加载动画。

  1. <div class="spinner">abc</div>

如何让旋转动画内部的文本保持静态，而不需要在旋转动画外部添加另一个元素？我不想使用库来实现这个效果，但如果有助于解决问题，我可以使用jQuery。但它应该简单而易于实现。

英文:

I try to get a very simple loading animation that is implemented with CSS.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .spinner
  2. {
  3.     border: 5px solid red;
  4.     border-top: 5px solid green;
  5.     border-radius: 50%;
  6.     width: 30px;
  7.     height: 30px;
  8.     animation: spin 3s linear infinite;
  9. }
  10. @keyframes spin
  11. {
  12.     0% { transform: rotate(0deg); }
  13.     100% { transform: rotate(360deg); }
  14. }

<!-- language: lang-html -->

  1. 123
  3. &lt;div class=&quot;spinner&quot;&gt;abc&lt;/div&gt;
  5. 987

<!-- end snippet -->

Any way I get the text inside the spinner to be static and not turning without having another element outside the spinner?

I do not want to integrate libs for that. But I use jQuery if that helps. But it should be simple and easy.

答案1

得分: 4

你可以使用::before来在文本周围添加一个旋转的加载图标。以下是一个示例代码：

  1. .spinner {
  2.     position: relative;
  3.     display: flex;
  4.     justify-content: center;
  5.     align-items: center;
  6.     width: 200px;
  7.     height: 200px;
  8.     background-color: aliceblue;
  9.     border-radius: 50%;
  10. }
  12. .spinner::before {
  13.     content: "";
  14.     position: absolute;
  15.     top: -10px;
  16.     left: -10px;
  17.     right: -10px;
  18.     z-index: -100;
  19.     bottom: -10px;
  20.     background: rgb(82,210,56);
  21.     background: linear-gradient(15deg, rgba(82,210,56,1) 0%, rgba(135,107,184,1) 11%, rgba(106,190,96,1) 43%, rgba(209,35,35,1) 79%, rgba(217,186,173,1) 100%);
  22.     border-radius: 50%;
  23.     transform-origin: center center;
  24.     animation: spin 2s linear infinite;
  25. }
  27. @keyframes spin {
  28.     0% {
  29.         transform: rotate(0);
  30.     }
  31.     100% {
  32.         transform: rotate(360deg);
  33.     }
  34. }
  1. <div class="spinner">
  2.     asdasd
  3.     <br>
  4.     asdasd
  5. </div>
英文:

You can use ::before to add a spinner around text.
here is a sample code

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

  1.  .spinner
  2.     {
  3.             position: relative;
  4.             display: flex;
  5.             justify-content: center;
  6.             align-items: center;
  7.             width: 200px;
  8.             height: 200px;
  9.             background-color: aliceblue;
  10.             border-radius: 50%;
  11.     }
  15. .spinner::before {
  16.             content: &quot;&quot;;
  17.             position: absolute;
  18.             top: -10px;
  19.             left: -10px;
  20.             right: -10px;
  21.             z-index: -100;
  22.             bottom: -10px;
  23.             background: rgb(82,210,56);
  24.             background: linear-gradient(15deg, rgba(82,210,56,1) 0%, rgba(135,107,184,1) 11%, rgba(106,190,96,1) 43%, rgba(209,35,35,1) 79%, rgba(217,186,173,1) 100%);
  25.             border-radius: 50%;
  26.             transform-origin: center center;
  27.             animation: spin 2s linear infinite;
  28.     }
  29.     @keyframes spin {
  30.            0% {
  31.               transform: rotate(0);
  32.            }
  33.            100% {
  34.               transform: rotate(360deg);
  35.            }
  36.     }

<!-- language: lang-html -->

<div class="spinner">
asdasd
<br>
asdasd
</div>

<!-- end snippet -->

答案2

得分: 2

你可以使用一个包装元素来定位其中的元素。

  1. 123
  3. <div class="spinner-container">
  4.   <div class="spinner absolute"></div>
  5.   <p class="absolute">abc</p>
  6. </div>
  8. 987
英文:

You could use a wrapper element to position your elements inside it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .spinner {
  2.   right: 0;
  3.   border: 5px solid red;
  4.   border-top: 5px solid green;
  5.   border-radius: 50%;
  6.   animation: spin 3s linear infinite;
  7. }
  9. @keyframes spin {
  10.   0% {
  11.     transform: rotate(0deg);
  12.   }
  13.   100% {
  14.     transform: rotate(360deg);
  15.   }
  16. }
  18. .spinner-container {
  19.   position: relative;
  20.   width: 35px;
  21.   height: 35px;
  22. }
  24. .spinner-container p {
  25.   display: flex;
  26.   justify-content: center;
  27.   align-items: center;
  28. }
  30. .absolute {
  31.   position: absolute;
  32.   top: 0;
  33.   bottom: 0;
  34.   left: 0;
  35.   right: 0;
  36. }

<!-- language: lang-html -->

  1. 123
  3. &lt;div class=&quot;spinner-container&quot;&gt;
  4.   &lt;div class=&quot;spinner absolute&quot;&gt;&lt;/div&gt;
  5.   &lt;p class=&quot;absolute&quot;&gt;abc&lt;/p&gt;
  6. &lt;/div&gt;
  8. 987

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月13日 18:09:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/76463815.html
  • css
  • html
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定