H5 页面无任何依赖全屏加载进度条...

页面加载进度条最重要的就是所有依赖内嵌到页面中，不依赖任何外部样式和脚本，这样才能在页面加载时就显示出来
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        body {
            margin: 0
        }

        .ys_loading_c {
            flex-direction: column;
            height: 100vh;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .ys_loading_icon {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
        }

        .ys_loading_icon>:not([hidden])~:not([hidden]) {
            --tw-space-x-reverse: 0;
            margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse)));
            margin-right: calc(.5rem*var(--tw-space-x-reverse))
        }

        .ys_loading {
            aspect-ratio: 1/1;
            background-color: currentColor;
            display: inline-block;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 100%;
            mask-size: 100%;
            pointer-events: none;
            width: 1.5rem;
            -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' preserveAspectRatio='xMidYMid' style='shape-rendering:auto' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-dasharray='205.271142578125 51.317785644531256' stroke-linecap='round' stroke-width='10' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20c-19.3 0-32.1-40-51.4-40z' style='transform:scale(.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' dur='2s' keyTimes='0;1' repeatCount='indefinite' values='0;256.58892822265625'/%3E%3C/path%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' preserveAspectRatio='xMidYMid' style='shape-rendering:auto' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-dasharray='205.271142578125 51.317785644531256' stroke-linecap='round' stroke-width='10' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20c-19.3 0-32.1-40-51.4-40z' style='transform:scale(.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' dur='2s' keyTimes='0;1' repeatCount='indefinite' values='0;256.58892822265625'/%3E%3C/path%3E%3C/svg%3E");
            width: 2.5rem;
            --tw-text-opacity: 1;
            --p: 259 94% 51%;
            color: hsl(var(--p)/var(--tw-text-opacity))
        }

        .ys_loading_tip {
            margin-top: .5rem;
            color: rgb(156 163 175)
        }
    </style>
</head>

<body>
    <div class="ys_loading_c">
        <div class="ys_loading_icon">
            <span class="ys_loading"></span>
        </div>
        <div class="ys_loading_tip">loading ...</div>
    </div>
</body>

</html>
效果图如下
截屏2023-06-20 08.11.55.png