нужно переработать эту анимацию

#loader-screen {
  opacity: 0;
  display: none;
  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 {
  position: absolute;
  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%;
}

/* .loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 60px;
  height: 60px;
  border: 10px solid #989898;
  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);
  }
}<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 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"/>
            </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"/>
            <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"/>
            <feOffset/>
            <feGaussianBlur stdDeviation="9.05"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <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"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1474_437"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1474_437" result="shape"/>
            </filter>
            </defs>
            </svg>
            
        </div>
      </div>$(function() {
  $('#nav-start').on('click', function() {
    $el = $(this).parent()
    $('#main > *:not(.main-nav)').addClass('transparent')
    $('.main-nav > li:not(:first-child)').addClass('transparent')
    $el.css({ transform: 'scale(3)' })
    $('#loader-screen').css({ display: 'block' })
    $el.one('transitionend', function() {
      setTimeout(function() {
        $el.css({ left: '100vw' })
        $('#loader-screen')
          .css({ opacity: 1 })
          .one('transitionend', function() {
            $('.loader').css({ bottom: 190 })
         
          })
      }, 3000)
    })
  })
})
для этого скрипта
// main.js
document.addEventListener('DOMContentLoaded', () => {
    const loader = document.getElementById('loader');
    const loaderTextTop = document.getElementById('loader-text-top');
    const loaderTextBottom = document.getElementById('loader-text-bottom');
    const content = document.getElementById('content');

    let currentPageStyles = null; // Ссылка на текущий CSS файл

    // Функция для отображения загрузочного экрана с текстами
    function showLoader(textTop, textBottom) {
        loaderTextTop.textContent = textTop || '';
        loaderTextBottom.textContent = textBottom || '';
        loader.style.display = 'flex';
    }

    // Функция для скрытия загрузочного экрана
    function hideLoader() {
        loader.style.display = 'none';
    }

    // Функция для динамической загрузки скрипта с возвратом Promise
    function loadScript(page) {
    return new Promise((resolve, reject) => {
        // Находим все скрипты с id 'page-script' и удаляем их
        const existingScripts = document.querySelectorAll('#page-script');
        existingScripts.forEach(script => script.remove());

        // Создаем новый скрипт
        const script = document.createElement('script');
        script.src = `${page}.js`;
        script.id = 'page-script';

        // Обработчик загрузки скрипта
        script.onload = () => {
            resolve();
        };

        // Обработчик ошибок загрузки
        script.onerror = () => {
            reject(new Error(`Ошибка загрузки скрипта: ${page}.js`));
        };

        // Добавляем скрипт в документ
        document.body.appendChild(script);
    });
}

    // Функция для динамической загрузки CSS файла
    function loadStylesheet(page) {
        return new Promise((resolve, reject) => {
            // Удаляем предыдущий CSS файл, если он существует
            if (currentPageStyles) {
                currentPageStyles.remove();
                currentPageStyles = null;
            }

            // Создаем новый link элемент для CSS
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = `${page}.css`;
            link.id = `${page}-css`;

            // Обработчик загрузки CSS
            link.onload = () => {
                resolve();
            };

            // Обработчик ошибок загрузки CSS
            link.onerror = () => {
                reject(new Error(`Ошибка загрузки CSS файла: ${page}.css`));
            };

            // Добавляем CSS в head
            document.head.appendChild(link);
            currentPageStyles = link;
        });
    }

    // Функция-обработчик клика
    async function handleElementClick(element) {
        const page = element.getAttribute('data-page');
        const loaderTop = element.getAttribute('data-loader-top');
        const loaderBottom = element.getAttribute('data-loader-bottom');

        if (!page) {
            console.warn('Элемент не имеет атрибута data-page');
            return;
        }

        try {
            // Отображаем загрузочный экран с переданными текстами
            showLoader(loaderTop, loaderBottom);
            // Загрузить CSS для страницы
            await loadStylesheet(page);
            // Загрузить JS для страницы
            await loadScript(page);

            // Предполагаем, что загруженный скрипт включает функцию для рендеринга
            if (typeof renderPage === 'function') {
                await renderPage(); // Ждём выполнения рендеринга
            } else {
                console.warn(`Функция renderPage не определена в ${page}.js`);
            }

            hideLoader();
        } catch (error) {
            hideLoader();
            content.innerHTML = `<p>${error.message}</p>`;
            console.error(error);
        }
    }

    // Обработчик событий клика с использованием делегирования
    document.addEventListener('click', (event) => {
        // Проверяем, содержит ли кликнутый элемент или его родитель нужный атрибут
        const target = event.target.closest('[data-page]');
        if (target) {
            event.preventDefault();
            handleElementClick(target);
        }
    });

    // Обработчик событий клавиатуры для доступности (Enter)
    document.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            const target = event.target.closest('[data-page]');
            if (target) {
                event.preventDefault();
                handleElementClick(target);
            }
        }
    });
});