ReactHooks——制作一个简单的loading

js

  const [loding, setloding] = useState(false); //loding
  const changeloding = () => {
    setloding(true);
    setTimeout(() => {
      setloding(false);
    }, 1000);
  };
  //正常情况下请求接口
    const geturl = async()=>{
    try {
      setloding(true);
    } catch (error) {
      
    }finally{
      setloding(false);
    }
  }

less

.buttondiv{
    width: 250px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    position: relative;
    background-color: yellow;
    color: #0f0;
}
.lodingdiv{
    width: 100%;
    height: 40px;
    background-color: #666;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.loding {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 3px solid hsla(185, 100%, 62%, 0.2);
    border-top-color: #3cefff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

结构

      <div className="buttondiv">
        <span>这是一个小小的button</span>
        <div className="lodingdiv" style={loding ? {} : { display: "none" }}>
          <div className="loding" ></div>
        </div>
      </div>
      <button
        onClick={() => {
          changeloding();
        }}
      >
        changeloding
      </button>