2019-10-09
描述
创建一个旋转加载的组件。
- 为组件中的元素定义适当的 CSS 样式和动画
- 定义一个组件,返回一个简单的 SVG,其大小可以通过
size
属性进行设置 - 当然,你也可以直接使用 CSS 动画 🍩 式的旋转 来实现
实现
.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'));
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于