首屏 loading 加载动画

本文介绍了一个使用CSS实现的加载动画效果,通过伪元素和关键帧动画实现了动态加载指示器,并为不同的加载圆点设置了颜色和延时,使得整体效果更加丰富且具有视觉吸引力。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div id="app">
      <div class="loading">
        <h2>玩命加载中...</h2>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
CSS:
.loading {
  text-align: center;
  padding-top: 10%;
  display: block;
}

/*
 * Loading Dots
 * Can we use pseudo elements here instead :after?
 */
.loading span {
  display: inline-block;
  vertical-align: middle;
  width: .6em;
  height: .6em;
  margin: .19em;
  background: #007DB6;
  border-radius: .6em;
  -webkit-animation: loading 1s infinite alternate;
  -moz-animation: loading 1s infinite alternate;
  -o-animation: loading 1s infinite alternate;
  -ms-animation: loading 1s infinite alternate;
          animation: loading 1s infinite alternate;    
}

/*
 * Dots Colors
 * Smarter targeting vs nth-of-type?
 */
.loading span:nth-of-type(2) {
  background: #008FB2;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
  background: #009B9E;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
  background: #00A77D;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
  background: #00B247;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  -ms-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
  background: #5AB027;
  -webkit-animation-delay: 1.0s;
  -moz-animation-delay: 1.0s;
  -o-animation-delay: 1.0s;
  -ms-animation-delay: 1.0s;
          animation-delay: 1.0s;
}
.loading span:nth-of-type(7) {
  background: #A0B61E;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

/*
 * Animation keyframes
 * Use transition opacity instead of keyframes?
 */
@-webkit-keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

### React 加载动画的实现方法 在 React 中实现加载动画可以通过多种方式来完成,以下是几种常见的解决方案: #### 方法一:使用 Lottie 动画库 Lottie 是一款强大的工具,可以将 JSON 文件解析为动画并嵌入到网页中。这种方法非常适合需要高质量动画效果的场景。 1. 安装 `lottie-react` 库: ```bash npm install lottie-react ``` 2. 使用 Lottie 渲染动画: ```javascript import React, { useEffect, useState } from 'react'; import Animation from './animation.json'; // 导入设计师制作的JSON文件 import Lottie from 'lottie-react'; const App = () => { const [loading, setLoading] = useState(true); useEffect(() => { setTimeout(() => { setLoading(false); }, 3000); // 延迟3秒模拟加载过程 }, []); return ( <> {loading ? ( <div style={{ width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <Lottie animationData={Animation} loop /> </div> ) : ( <main> {/* 主应用内容 */} <h1>欢迎来到我的网站</h1> </main> )} </> ); }; export default App; ``` 此方法利用了 Lottie 的强大功能[^1],能够轻松创建复杂的动画效果。 --- #### 方法二:通过懒加载优化体验 为了减少初始加载时间,可以采用懒加载技术只渲染必要的组件,而其他非关键资源则延迟加载。 1. 实现懒加载逻辑: ```javascript import React, { Suspense, lazy } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); const App = () => { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); }; ``` 这种方式结合了 React 的 `lazy` 和 `Suspense` API 来动态加载组件[^2],从而显著提高渲染速度。 --- #### 方法三:手动控制 DOM 删除 如果希望更精细地管理加载状态,可以在组件挂载完成后移除加载动画对应的 DOM 节点。 1. 创建加载动画节点: ```html <!-- public/index.html --> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <div id="Loading"> <img src="/spinner.gif" alt="Loading..." /> <!-- 替换为GIF动图 --> </div> </body> ``` 2. 移除加载动画节点: ```javascript import React, { useEffect } from 'react'; const App = () => { useEffect(() => { const loadingElement = document.getElementById('Loading'); if (loadingElement) { loadingElement.remove(); // 加载完成后删除DOM节点 } }, []); return ( <main> <h1>主页面已加载完毕</h1> </main> ); }; export default App; ``` 该方案基于传统的方式,在组件初始化后直接操作 DOM 结构[^3],适合简单需求的应用程序。 --- ### 总结 以上三种方法各有优劣,具体选择取决于项目的实际需求和技术栈支持情况。推荐优先考虑 **Lottie 动画** 或者 **懒加载技术**,因为它们不仅提升了用户体验,还兼顾了性能优化。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值