React Spinners CSS Loaders (Vue, Angular) 使用纯 css 的 React Spinners 组件的惊人集合。 React 微调器基于 load.io 和来自整个网络。 如果您想添加自己的微调器，请遵循贡献指南。 :nail_polish: 没有额外的 CSS 导入:scissors: 零依赖项:package: Spinner 可以单独安装 Live Demo 浏览组件并使用 Bit 探索他们的道具。 使用 npm、yarn 或 bit 安装特定的 react spinner 组件，而无需安装整个项目。 安装组件和现场演示 :rocket: Spinner 列表 - PropTypes 和默认 Props 每个组件都接受一个 color 属性，很少有也接受 size 属性。 默认颜色道具是#7f58af。 接受 size 属性的组件具有以像素为单位的默认大小。 Spinner 颜色：字符串 大小：数字 className：字符串 样式：对象 #7f58af 64 "" {} #7f58af 80 "" {} #7f58af 80 "" {} #

react-loading-skeleton 制作精美的动画加载骨架，可自动适应您的应用程序。 基本用法 通过 npm/yarn 使用 react-loading-skeleton 安装。 从“React加载骨架”导入骨架； // 简单的单行加载骨架 // 五行加载骨架原则 适应你定义的样式 组件被设计成直接在你的组件中使用，在它仍然加载时代替内容。 与其他库不同，与其精心制作骨架屏幕以匹配您的内容所采用的字体大小、行高或边距，不如使用组件使其自动填充正确的尺寸。 例如： class Blogpost extends Component { render() { return ( {this.props.title || } {this.props.body || } ); ...将为标题和正文部分生成正确大小的骨架，而无需对组件进行任何进一步配置。 这可确保加载状态随着您的布局或排版的任何更改而保持最新。 不要制作专用的骨架屏幕，而是制作具有内置骨架状态的组件。 除了保持样式同步之外，还有一些其他原因可以做到这一点： 组件表示它可以加载的所有可能状态 - 包括加载。 它允许更灵活的加

React Spinners 基于 Halogen 的 React.js 加载微调器的集合。 这个包使用 react-npm-boilerplate Demo Demo Page 安装使用 Yarn：yarn add react-spinners 使用 npm：npm install --save react-spinners 用法每个加载器都有自己的默认属性。 您可以通过将道具传递到加载器来覆盖默认值。 每个加载器都接受一个加载道具作为布尔值。 如果加载为假，加载器将呈现 null。 重要提示：此包使用情感。 记得在 .babelrc 中添加插件，例如： { "presets": ["@babel/preset-react", "@babel/preset-env"], "plugins": ["@emotion"] } Example import { useState } 来自“React”； 从“@emotion/react”导入{css}； 从“react-spinners/ClipLoader”导入 ClipLoader； // 也可以是字符串。 需要确保每个键值对都以 ;