如何为ReactJs组件添加CSS动画，解决加载动画不生效问题

• 校验文件路径与大小写匹配：React对资源路径大小写敏感，先确认组件文件同级目录下存在css子文件夹，且子文件夹内的文件名称和引入时的./css/CircleSpinner.css完全一致，比如如果实际文件名为circlespinner.css或CircleSpiner.css都会导致引入失效。
• 补充.lds-circle类的必要基础样式：CSS动画生效的前提是元素存在可见内容，若CSS中仅定义了动画属性未设置宽高、填充样式等，元素会因为宽高为0不可见，你可以直接将以下内容写入CircleSpinner.css验证效果：

.lds-circle {
  width: 60px;
  height: 60px;
  position: relative;
}
.lds-circle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #2196f3;
  border-bottom-color: #2196f3;
  animation: circle-spin 1s ease-in-out infinite;
}
@keyframes circle-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

• 检查类名与组件拼写：你当前组件内使用的类名是lds-circle，确保CSS文件中的类名完全一致没有拼写错误；同时注意组件命名CircleSpiner拼写缺了一个n，正确拼写为CircleSpinner，如果其他文件引入时用了正确拼写会导致组件加载失败。
• 确认CSS引入规则配置：如果你的项目开启了CSS模块化规则，普通CSS文件会被自动hash类名，此时需要把CSS文件重命名为CircleSpinner.module.css，引入和使用方式调整为：

import React from 'react'
import styles from './css/CircleSpinner.module.css'

const CircleSpiner = () => {
    return (
        <div className={styles["lds-circle"]} >

        </div>
    )
}

export default CircleSpiner

内容的提问来源于stack exchange，提问作者Agent47