Анимация должна быть по центру и видна
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
            background-color:black;
        }

        #loader-screen {
            opacity: 0;
            display: flex;
            transition: ease-out opacity 1s;
            position: absolute;
            inset: 0;
            z-index: 50;
            background: radial-gradient(63.84% 79.17% at 50% 50%,
                    rgba(0, 0, 0, 0) 0%,
                    #000000 100%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.8) 40.05%, #000000 100%);
        }

        .loader {
         
            width: 100px;
            height: 100px;
            transform-origin: 59px 50px;
            /* animation: loader 3s linear infinite; */
            transition: ease-out bottom 2s;
            left: 50%;
            margin-left: -60px;
            bottom: -150px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }

        .inner-loader {
            transition: ease-out bottom 2s;
            animation: loader 3s linear infinite;
        }

        @keyframes loader {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="loader-screen">
        <div class="loader">
            <svg class="inner-loader" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_d_1474_437)">
                    <path d="M87.2843 30.7157C102.905 46.3367 102.905 71.6633 87.2843 87.2843C71.6633 102.905 46.3367 102.905 30.7157 87.2843C15.0948 71.6633 15.0948 46.3367 30.7157 30.7157C46.3367 15.0948 71.6633 15.0948 87.2843 30.7157ZM39.201 78.799C50.1357 89.7337 67.8643 89.7337 78.799 78.799C89.7337 67.8643 89.7337 50.1357 78.799 39.201C67.8643 28.2663 50.1357 28.2663 39.201 39.201C28.2663 50.1357 28.2663 67.8643 39.201 78.799Z" fill="white" fill-opacity="0.25"></path>
                    <path d="M30.7157 30.7157C34.4301 27.0014 38.8393 24.0552 43.6924 22.0451C48.5454 20.0349 53.7468 19.0002 58.9997 19.0002C64.2526 19.0002 69.454 20.0349 74.307 22.0451C79.1601 24.0553 83.5699 27.0014 87.2843 30.7157L78.799 39.201C76.1989 36.601 73.1119 34.5388 69.7148 33.1316C66.3177 31.7245 62.6767 31.0002 58.9997 31.0002C55.3227 31.0002 51.6817 31.7245 48.2846 33.1316C44.8874 34.5387 41.8011 36.601 39.201 39.201L30.7157 30.7157Z" fill="white"></path>
                </g>
                <defs>
                    <filter id="filter0_d_1474_437" x="0.9" y="0.9" width="116.2" height="116.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                        <feOffset></feOffset>
                        <feGaussianBlur stdDeviation="9.05"></feGaussianBlur>
                        <feComposite in2="hardAlpha" operator="out"></feComposite>
                        <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix>
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1474_437"></feBlend>
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1474_437" result="shape"></feBlend>
                    </filter>
                </defs>
            </svg>
        </div>
    </div>


</body></html>