如何制作一个围绕文本旋转的加载器

Question

我想让我的加载程序围绕我的文本旋转。现在文本与加载器一起旋转。如何制作固定位置的文字？

检查我的沙箱：https://codesandbox.io/s/compassionate-saha-c1te1?file=/src/App.js

import React, { Component } from "react";

import "./loader.scss";

class Loader extends Component {
  render() {
    return (
      <div className="loader-wrapper">
        <div className="loader-component">myLogo</div>
        <h3>please wait</h3>
      </div>
    );
  }
}

export default Loader;

.loader-component{
  margin-top: 20%;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #555;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  z-index: 9999;

}
.loader-wrapper{
  display: flex;
  flex-flow: column;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 99999;
  h3{
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
    color: #FFFFFF;
  }
  span{
    font-size: 15px;
    line-height: 24px;
    color: #FFFFFF;
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Answer 1

更改您的标记以分隔元素，然后应用新的 css。

class Loader extends Component {
  render() {
    return (
      <div className="loader-wrapper">
        <div className="logo-spinner">
          <div className="loader-component" />
          <p>logo</p>
        </div>
        <h3>please wait</h3>
      </div>
    );
  }
}

CSS

.loader-wrapper{
  .logo-spinner {
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .loader-component{ 
      border: 5px solid #f3f3f3;
      border-top: 5px solid #555;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite;
      z-index: 9999;
    }
  }
  display: flex;
  flex-flow: column;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 99999;
  h3{
    position: fixed;
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
    color: #FFFFFF;
    top: 55%;
  }
  p {
    padding: 0;
    margin: 0;
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  span{
    font-size: 15px;
    line-height: 24px;
    color: #FFFFFF;
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

这也将使加载程序完全居中在页面上。如果您希望它在页面上更高，您可以调整顶部。

这是更新后的沙盒： https://codesandbox.io/s/vigilant-frog-zf6sj?file=/src/component/Loader.js:68-343

如何制作一个围绕文本旋转的加载器

How to make a loader that spins around text

css

animation

loader

reactjs