2019-10-09 描述 创建一个旋转加载的组件。 为组件中的元素定义适当的 CSS 样式和动画 定义一个组件,返回一个简单的 SVG,其大小可以通过 size 属性进行设置 当然,你也可以直接使用 CSS 动画 [链接] 来实现 实现 .loader { animation: rotate 2s linear in ..

React Visual - 旋转加载组件

2019-10-09

描述

创建一个旋转加载的组件。

实现

.loader {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.loader circle {
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
function Loader({ size }) {
  return (
    <svg
      className="loader"
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
    </svg>
  );
}

使用

ReactDOM.render(<Loader size={24} />, document.getElementById('root'));

返回总目录

每天 30 秒系列之 React

回帖
请输入回帖内容...