Logo

菜单

发布于 2026-01-06 5 阅读
0

如何在 React 中创建一个简单的加载屏幕 loader-container{ loader path:nth-child(2){ loader path:nth-child(3){ loader path:nth-child(4){ loader path:nth-child(5){ loader path:nth-child(6){ loader path:nth-child(7){ loader path:nth-child(8){

如何在 React 中创建一个简单的加载屏幕

加载器容器{

加载器路径：nth-​​child(2){

加载器路径：nth-​​child(3){

加载器路径：nth-​​child(4){

加载器路径：第 n 个子节点(5){

加载器路径：nth-​​child(6){

加载器路径：nth-​​child(7){

加载器路径：nth-​​child(8){

嘿，开发者们👋
最近我一直在研究如何在不使用 npm 包的情况下，用 React 创建美观且易于使用的加载界面。我发现了一些方法，想和大家分享一下。

最终结果

最终结果

星球大战

使用 Figma 创建 SVG

是的，我们将使用 Figma 来创建 SVG 文件。让我们在电脑上打开 Figma，创建一个新的设计文件。

Figma

  • 现在，按 F 键创建一个相框，并选择任意尺寸。我将使用 1280 x 720。

  • 创建好框架后，让我们把背景调暗一些，这样我们就能清楚地看到所有内容。

  • 现在，在框架中创建一个文本，并增大其字体大小。我将使用 64 像素。（请确保文本的宽度和高度完全符合框架要求）

正在加载 SVG 文本

  • 现在，右键单击文本，然后选择“描边”。

轮廓笔画

  • 现在，我们移除文本的填充颜色，并添加一个宽度为 5 像素的描边颜色。现在，它应该看起来像这样……

最终SVG

  • 现在，右键单击文本，选择“复制为 SVG”。

项目初始设置

首先，让我们使用以下命令创建 React 应用。
npx create-react-app loading-screen

src现在，让我们删除加载屏幕应用程序目录中除逗号index.js、句点、句点以外的所有文件index.css。app.js

加载组件

我们先来创建加载组件。因此，在src文件夹中创建一个名为 `Loading.component.js` 的新文件Loading.jsx。Loading.css

  • div在加载组件内创建一个ID 为“loader-container”的组件。
  • 在 div 元素内粘贴 SVG 文件，并添加 id 属性“loader”。


import './Loading.css'
const Loading=()=>{
  return(
    <div id="loader-container">
      <svg id="loader" width="285" height="59" viewBox="0 0 285 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1_1_6" maskUnits="userSpaceOnUse" x="0.636353" y="0.818176" width="284" height="58" fill="black">
<rect fill="white" x="0.636353" y="0.818176" width="284" height="58"/>
<path d="M5.63635 53V6.45454H11.2727V48H32.9091V53H5.63635Z"/>
<path d="M79.0966 29.7273C79.0966 34.6364 78.2102 38.8788 76.4375 42.4545C74.6648 46.0303 72.2329 48.7879 69.142 50.7273C66.0511 52.6667 62.5208 53.6364 58.5511 53.6364C54.5814 53.6364 51.0511 52.6667 47.9602 50.7273C44.8693 48.7879 42.4375 46.0303 40.6648 42.4545C38.892 38.8788 38.0057 34.6364 38.0057 29.7273C38.0057 24.8182 38.892 20.5758 40.6648 17C42.4375 13.4242 44.8693 10.6667 47.9602 8.72727C51.0511 6.78787 54.5814 5.81818 58.5511 5.81818C62.5208 5.81818 66.0511 6.78787 69.142 8.72727C72.2329 10.6667 74.6648 13.4242 76.4375 17C78.2102 20.5758 79.0966 24.8182 79.0966 29.7273ZM73.642 29.7273C73.642 25.697 72.9678 22.2955 71.6193 19.5227C70.286 16.75 68.4754 14.6515 66.1875 13.2273C63.9148 11.803 61.3693 11.0909 58.5511 11.0909C55.7329 11.0909 53.1799 11.803 50.892 13.2273C48.6193 14.6515 46.8087 16.75 45.4602 19.5227C44.1269 22.2955 43.4602 25.697 43.4602 29.7273C43.4602 33.7576 44.1269 37.1591 45.4602 39.9318C46.8087 42.7045 48.6193 44.803 50.892 46.2273C53.1799 47.6515 55.7329 48.3636 58.5511 48.3636C61.3693 48.3636 63.9148 47.6515 66.1875 46.2273C68.4754 44.803 70.286 42.7045 71.6193 39.9318C72.9678 37.1591 73.642 33.7576 73.642 29.7273Z"/>
<path d="M88.2954 53H82.3864L99.4773 6.45454H105.295L122.386 53H116.477L102.568 13.8182H102.205L88.2954 53ZM90.4773 34.8182H114.295V39.8182H90.4773V34.8182Z"/>
<path d="M144 53H129.636V6.45454H144.636C149.152 6.45454 153.015 7.38636 156.227 9.25C159.439 11.0985 161.901 13.7576 163.614 17.2273C165.326 20.6818 166.182 24.8182 166.182 29.6364C166.182 34.4848 165.318 38.6591 163.591 42.1591C161.864 45.6439 159.348 48.3258 156.045 50.2045C152.742 52.0682 148.727 53 144 53ZM135.273 48H143.636C147.485 48 150.674 47.2576 153.205 45.7727C155.735 44.2879 157.621 42.1742 158.864 39.4318C160.106 36.6894 160.727 33.4242 160.727 29.6364C160.727 25.8788 160.114 22.6439 158.886 19.9318C157.659 17.2045 155.826 15.1136 153.386 13.6591C150.947 12.1894 147.909 11.4545 144.273 11.4545H135.273V48Z"/>
<path d="M181.273 6.45454V53H175.636V6.45454H181.273Z"/>
<path d="M229.483 6.45454V53H224.028L198.665 16.4545H198.21V53H192.574V6.45454H198.028L223.483 43.0909H223.937V6.45454H229.483Z"/>
<path d="M272.58 21C272.08 19.4697 271.42 18.0985 270.602 16.8864C269.799 15.6591 268.837 14.6136 267.716 13.75C266.61 12.8864 265.352 12.2273 263.943 11.7727C262.534 11.3182 260.989 11.0909 259.307 11.0909C256.549 11.0909 254.042 11.803 251.784 13.2273C249.526 14.6515 247.731 16.75 246.398 19.5227C245.064 22.2955 244.398 25.697 244.398 29.7273C244.398 33.7576 245.072 37.1591 246.42 39.9318C247.769 42.7045 249.595 44.803 251.898 46.2273C254.201 47.6515 256.792 48.3636 259.67 48.3636C262.337 48.3636 264.686 47.7955 266.716 46.6591C268.761 45.5076 270.352 43.8864 271.489 41.7955C272.64 39.6894 273.216 37.2121 273.216 34.3636L274.943 34.7273H260.943V29.7273H278.67V34.7273C278.67 38.5606 277.852 41.8939 276.216 44.7273C274.595 47.5606 272.352 49.7576 269.489 51.3182C266.64 52.8636 263.367 53.6364 259.67 53.6364C255.549 53.6364 251.928 52.6667 248.807 50.7273C245.701 48.7879 243.276 46.0303 241.534 42.4545C239.807 38.8788 238.943 34.6364 238.943 29.7273C238.943 26.0454 239.436 22.7348 240.42 19.7954C241.42 16.8409 242.83 14.3258 244.648 12.25C246.466 10.1742 248.617 8.58333 251.102 7.47727C253.587 6.37121 256.322 5.81818 259.307 5.81818C261.761 5.81818 264.049 6.18939 266.17 6.93181C268.307 7.65908 270.208 8.69696 271.875 10.0454C273.557 11.3788 274.958 12.9773 276.08 14.8409C277.201 16.6894 277.973 18.7424 278.398 21H272.58Z"/>
</mask>
<path d="M5.63635 53V6.45454H11.2727V48H32.9091V53H5.63635Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M79.0966 29.7273C79.0966 34.6364 78.2102 38.8788 76.4375 42.4545C74.6648 46.0303 72.2329 48.7879 69.142 50.7273C66.0511 52.6667 62.5208 53.6364 58.5511 53.6364C54.5814 53.6364 51.0511 52.6667 47.9602 50.7273C44.8693 48.7879 42.4375 46.0303 40.6648 42.4545C38.892 38.8788 38.0057 34.6364 38.0057 29.7273C38.0057 24.8182 38.892 20.5758 40.6648 17C42.4375 13.4242 44.8693 10.6667 47.9602 8.72727C51.0511 6.78787 54.5814 5.81818 58.5511 5.81818C62.5208 5.81818 66.0511 6.78787 69.142 8.72727C72.2329 10.6667 74.6648 13.4242 76.4375 17C78.2102 20.5758 79.0966 24.8182 79.0966 29.7273ZM73.642 29.7273C73.642 25.697 72.9678 22.2955 71.6193 19.5227C70.286 16.75 68.4754 14.6515 66.1875 13.2273C63.9148 11.803 61.3693 11.0909 58.5511 11.0909C55.7329 11.0909 53.1799 11.803 50.892 13.2273C48.6193 14.6515 46.8087 16.75 45.4602 19.5227C44.1269 22.2955 43.4602 25.697 43.4602 29.7273C43.4602 33.7576 44.1269 37.1591 45.4602 39.9318C46.8087 42.7045 48.6193 44.803 50.892 46.2273C53.1799 47.6515 55.7329 48.3636 58.5511 48.3636C61.3693 48.3636 63.9148 47.6515 66.1875 46.2273C68.4754 44.803 70.286 42.7045 71.6193 39.9318C72.9678 37.1591 73.642 33.7576 73.642 29.7273Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M88.2954 53H82.3864L99.4773 6.45454H105.295L122.386 53H116.477L102.568 13.8182H102.205L88.2954 53ZM90.4773 34.8182H114.295V39.8182H90.4773V34.8182Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M144 53H129.636V6.45454H144.636C149.152 6.45454 153.015 7.38636 156.227 9.25C159.439 11.0985 161.901 13.7576 163.614 17.2273C165.326 20.6818 166.182 24.8182 166.182 29.6364C166.182 34.4848 165.318 38.6591 163.591 42.1591C161.864 45.6439 159.348 48.3258 156.045 50.2045C152.742 52.0682 148.727 53 144 53ZM135.273 48H143.636C147.485 48 150.674 47.2576 153.205 45.7727C155.735 44.2879 157.621 42.1742 158.864 39.4318C160.106 36.6894 160.727 33.4242 160.727 29.6364C160.727 25.8788 160.114 22.6439 158.886 19.9318C157.659 17.2045 155.826 15.1136 153.386 13.6591C150.947 12.1894 147.909 11.4545 144.273 11.4545H135.273V48Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M181.273 6.45454V53H175.636V6.45454H181.273Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M229.483 6.45454V53H224.028L198.665 16.4545H198.21V53H192.574V6.45454H198.028L223.483 43.0909H223.937V6.45454H229.483Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
<path d="M272.58 21C272.08 19.4697 271.42 18.0985 270.602 16.8864C269.799 15.6591 268.837 14.6136 267.716 13.75C266.61 12.8864 265.352 12.2273 263.943 11.7727C262.534 11.3182 260.989 11.0909 259.307 11.0909C256.549 11.0909 254.042 11.803 251.784 13.2273C249.526 14.6515 247.731 16.75 246.398 19.5227C245.064 22.2955 244.398 25.697 244.398 29.7273C244.398 33.7576 245.072 37.1591 246.42 39.9318C247.769 42.7045 249.595 44.803 251.898 46.2273C254.201 47.6515 256.792 48.3636 259.67 48.3636C262.337 48.3636 264.686 47.7955 266.716 46.6591C268.761 45.5076 270.352 43.8864 271.489 41.7955C272.64 39.6894 273.216 37.2121 273.216 34.3636L274.943 34.7273H260.943V29.7273H278.67V34.7273C278.67 38.5606 277.852 41.8939 276.216 44.7273C274.595 47.5606 272.352 49.7576 269.489 51.3182C266.64 52.8636 263.367 53.6364 259.67 53.6364C255.549 53.6364 251.928 52.6667 248.807 50.7273C245.701 48.7879 243.276 46.0303 241.534 42.4545C239.807 38.8788 238.943 34.6364 238.943 29.7273C238.943 26.0454 239.436 22.7348 240.42 19.7954C241.42 16.8409 242.83 14.3258 244.648 12.25C246.466 10.1742 248.617 8.58333 251.102 7.47727C253.587 6.37121 256.322 5.81818 259.307 5.81818C261.761 5.81818 264.049 6.18939 266.17 6.93181C268.307 7.65908 270.208 8.69696 271.875 10.0454C273.557 11.3788 274.958 12.9773 276.08 14.8409C277.201 16.6894 277.973 18.7424 278.398 21H272.58Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1_1_6)"/>
</svg>

    </div>
  )
}
export default Loading;
Enter fullscreen mode Exit fullscreen mode

将加载组件集成到应用程序中

  • 让我们先从导入开始Loading.jsx。App.js import Loading from "./Loading";
  • 由于加载画面只在渲染开始时出现，我们将利用React.useState()这一点。React.useEffect()
  • 让我们创建一个名为loadinginitialized 的本地状态，并将其值设为 true，然后用它setLoading来切换其值。
  • 使用useEffect()andsetTimeout()将值更改loading为 false。
  • 之后，我们将检查结果是否loading为真，如果为真则返回。<Loading/>


import Loading from "./Loading";
import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
  const [loading, setLoading] = useState(true)
    useEffect(() => {
        setTimeout(() => setLoading(false), 3300)
    }, [])
    if (loading) {
        return <Loading/>
    }
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

页面样式

我们先来设置样式App.js，然后再继续处理 Loading 组件。

  • 设置主应用程序的样式

body{
margin:0;
padding: 0;
box-sizing: border-box;
}
.App {
font-family: sans-serif;
text-align: center;
}

- Styling the Loader
Now, we will be using the [`stroke-dasharray`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) and [`stroke-dashoffset`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset) property in CSS to animate our SVG. I highly advise learning about this property if you are not familiar with it. Basically, we will be playing the stroke of the individual child path of the SVG.
Enter fullscreen mode Exit fullscreen mode

加载器容器{

max-width:220px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}

加载器路径：nth-​​child(2){

stroke-dasharray: 200%;
stroke-dashoffset: 200%;
animation: strokeAnimate 2s 0s ease forwards;
}

加载器路径：nth-​​child(3){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 0.3s ease forwards;
}

加载器路径：nth-​​child(4){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 0.9s ease forwards;
}

加载器路径：第 n 个子节点(5){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 1.2s ease forwards;
}

加载器路径：nth-​​child(6){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 1.5s ease forwards;
}

加载器路径：nth-​​child(7){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 1.8s ease forwards;
}

加载器路径：nth-​​child(8){

stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: strokeAnimate 2s 2.1s ease forwards;
}

@keyframes strokeAnimate{
to{
stroke-dashoffset: 0;

}
}

@media screen and (max-width: 768px) {
#loader-container{
max-width:150px;
}
#loader{
width:150px;
}
}

@media screen and (max-width:650px) {
#loader-container{
max-width:100px;
}
#loader{
width:100px;
}
}

## Result



### Final Thoughts
I think this method is pretty slick and easy to create awesome Loading Screens. Do let me know if you have any doubts or facing any problem implementing this. 

Adios Amigo 👋

![Tuco](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7oq5poteafrau61bkbt.png)
Enter fullscreen mode Exit fullscreen mode
文章来源：https://dev.to/beginarjun/how-to-create-a-simple-loading-screen-in-react-1md6
作为一名计算机科学/工程专业的学生...
别错过！40 多个目前热门的免费 ...