萧寂

带提示的loading框

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .loader {
            margin: auto;
            width: fit-content;
            font-weight: bold;
            font-family: monospace;
            font-size: 24px;
            background: radial-gradient(circle closest-side, #2563eb 94%, #0000) right/calc(200% - 1em) 100%;
            animation: l24 1s infinite alternate linear;
        }

        .loader::before {
            content: "全网检索中，请稍等...";
            line-height: 1em;
            color: #0000;
            background: inherit;
            background-image: radial-gradient(circle closest-side, #fff 94%, #2563eb);
            -webkit-background-clip: text;
            background-clip: text;
        }

        @keyframes l24 {
            100% {
                background-position: left
            }
        }
    </style>
</head>

<body>
    <div class="loader"></div>
</body>

</html>
带提示的loading框 ​

带提示的loading框
