анимация загрузки тоже отдельным js  файлом с стилями со своими
Обновлённая структура проекта

/project
│
├── index.html
├── styles.css
├── loader.css
├── main.js
├── bin
│   └── js-page
│       ├── page1.js
│       ├── page1.css
│       ├── page2.js
│       └── page2.css
Шаги обновления:
Переместите файлы page1.js, page1.css, page2.js и page2.css в папку /bin/js-page/.
Обновите пути в main.js, чтобы указывать на новую директорию.
1. Обновление main.js
Основное изменение заключается в том, что теперь файлы страниц находятся в поддиректории /bin/js-page/. По этой причине нужно обновить пути в функциях загрузки скриптов и стилей.

Обновлённый main.js

// 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');
    const buttons = document.querySelectorAll('nav button');

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

    const PAGE_RESOURCES_PATH = 'bin/js-page/'; // Базовый путь для ресурсов страниц

    // Функция для отображения загрузочного экрана с текстами
    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) => {
            // Удаляем предыдущий скрипт, если он существует
            const existingScript = document.getElementById('page-script');
            if (existingScript) {
                existingScript.remove();
            }

            // Создаем новый скрипт
            const script = document.createElement('script');
            script.src = `${PAGE_RESOURCES_PATH}${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_RESOURCES_PATH}${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;
        });
    }

    // Обработчики кликов по кнопкам навигации
    buttons.forEach(button => {
        button.addEventListener('click', async () => {
            const page = button.getAttribute('data-page');
            const loaderTop = button.getAttribute('data-loader-top');
            const loaderBottom = button.getAttribute('data-loader-bottom');

            try {
                // Отображаем загрузочный экран с переданными текстами
                showLoader(loaderTop, loaderBottom);

                // Загрузить CSS для страницы
                await loadStylesheet(page);

                // Загрузить JS для страницы
                await loadScript(page);

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

                hideLoader();
            } catch (error) {
                hideLoader();
                content.innerHTML = `<p>${error.message}</p>`;
                console.error(error);
            }
        });
    });
});
Объяснение изменений:

Константа PAGE_RESOURCES_PATH: Добавлена для хранения базового пути к ресурсам страниц. Это упрощает управление путями к файлам.

const PAGE_RESOURCES_PATH = 'bin/js-page/'; // Базовый путь для ресурсов страниц
Обновление путей в loadScript и loadStylesheet: Теперь они используют PAGE_RESOURCES_PATH для указания полного пути к файлам скриптов и стилей.

script.src = `${PAGE_RESOURCES_PATH}${page}.js`;
link.href = `${PAGE_RESOURCES_PATH}${page}.css`;
2. Обновление файлов страниц (page1.js и page2.js)
Убедитесь, что ваши файлы страниц в папке /bin/js-page/ корректно ссылаются на стили и элементы страницы.

bin/js-page/page1.js

// page1.js
function renderPage() {
    return new Promise((resolve) => {
        const content = document.getElementById('content');
        // Применяем класс стилей для страницы 1
        content.className = 'page1-background'; // Добавляем фоновый стиль

        // Имитируем асинхронную загрузку или сложную отрисовку с задержкой
        setTimeout(() => {
            content.innerHTML = `
                <h1 class="page1-text">Страница 1</h1>
                <p class="page1-text">Это содержимое первой страницы.</p>
                <button class="page1-button">Особенная кнопка для Страницы 1</button>
            `;
            resolve();
        }, 1000); // Задержка 1 секунду для демонстрации
    });
}
bin/js-page/page2.js

// page2.js
function renderPage() {
    return new Promise((resolve) => {
        const content = document.getElementById('content');
        // Применяем класс стилей для страницы 2
        content.className = 'page2-background'; // Добавляем фоновый стиль

        // Имитируем асинхронную загрузку или сложную отрисовку с задержкой
        setTimeout(() => {
            content.innerHTML = `
                <h1 class="page2-text">Страница 2</h1>
                <p class="page2-text">Это содержимое второй страницы.</p>
                <button class="page2-button">Особенная кнопка для Страницы 2</button>
            `;
            resolve();
        }, 1000); // Задержка 1 секунду для демонстрации
    });
}
Примечание: Если в будущем планируется добавлять больше страниц, убедитесь, что их JavaScript и CSS находятся в папке /bin/js-page/ и правильно именованы.

3. Обновление путей для других файлов
Убедитесь, что все другие файлы (index.html, styles.css, loader.css) находятся в корневой папке /project/ и корректно ссылаются на main.js.

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Динамическая загрузка страниц</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="loader.css">
</head>
<body>
    <!-- Загрузочный экран -->
    <div id="loader">
        <div class="loader-content">
            <div id="loader-text-top" class="loader-text"></div>
            <div class="spinner"></div>
            <div id="loader-text-bottom" class="loader-text"></div>
        </div>
    </div>

    <!-- Навигация -->
    <nav>
        <button 
            data-page="page1" 
            data-loader-top="Загрузка Страницы 1" 
            data-loader-bottom="Пожалуйста, подождите..."
        >
            Страница 1
        </button>
        <button 
            data-page="page2" 
            data-loader-top="Загрузка Страницы 2" 
            data-loader-bottom="Подготовка данных..."
        >
            Страница 2
        </button>
    </nav>

    <!-- Контейнер для динамического контента -->
    <div id="content">
        <h1>Добро пожаловать!</h1>
        <p>Выберите страницу для просмотра.</p>
    </div>

    <script src="main.js"></script>
</body>
</html>
4. Убедитесь, что CSS файлы находятся в правильных местах
Все CSS файлы для отдельных страниц должны находиться в папке /bin/js-page/ вместе с соответствующими JavaScript файлами.

bin/js-page/page1.css

/* page1.css */
.page1-background {
    background-color: #f0f8ff; /* Светло-голубой фон */
}

.page1-text {
    color: #2e8b57; /* Зеленый цвет текста */
}

.page1-button {
    background-color: #2e8b57; /* Зеленая кнопка */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

.page1-button:hover {
    background-color: #3cb371; /* Более светлый зеленый при наведении */
}
bin/js-page/page2.css

/* page2.css */
.page2-background {
    background-color: #ffe4e1; /* Светло-розовый фон */
}

.page2-text {
    color: #8b0000; /* Темно-красный цвет текста */
}

.page2-button {
    background-color: #8b0000; /* Темно-красная кнопка */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

.page2-button:hover {
    background-color: #ff6347; /* Более светлый красный при наведении */
}
5. Запуск локально
Организуйте структуру папок согласно обновлённой структуре проекта.
Убедитесь, что все файлы находятся на своих местах и содержат корректный код.
Запустите локальный веб-сервер, чтобы избежать проблем с политикой безопасности браузера при загрузке локальных файлов через JavaScript. Например, с помощью Python:

# Для Python 3.x
python -m http.server 8000
Откройте браузер и перейдите по адресу http://localhost:8000.
Проверьте навигацию, нажав на кнопки "Страница 1" и "Страница 2". Вы должны увидеть загрузочный экран с соответствующими текстами и после его завершения контент страниц с применёнными стилями.
Полный обновлённый код проекта
Для удобства предоставляю полный код всех файлов с учётом новой структуры папок.

1. index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Динамическая загрузка страниц</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="loader.css">
</head>
<body>
    <!-- Загрузочный экран -->
    <div id="loader">
        <div class="loader-content">
            <div id="loader-text-top" class="loader-text"></div>
            <div class="spinner"></div>
            <div id="loader-text-bottom" class="loader-text"></div>
        </div>
    </div>

    <!-- Навигация -->
    <nav>
        <button 
            data-page="page1" 
            data-loader-top="Загрузка Страницы 1" 
            data-loader-bottom="Пожалуйста, подождите..."
        >
            Страница 1
        </button>
        <button 
            data-page="page2" 
            data-loader-top="Загрузка Страницы 2" 
            data-loader-bottom="Подготовка данных..."
        >
            Страница 2
        </button>
    </nav>

    <!-- Контейнер для динамического контента -->
    <div id="content">
        <h1>Добро пожаловать!</h1>
        <p>Выберите страницу для просмотра.</p>
    </div>

    <script src="main.js"></script>
</body>
</html>
2. styles.css

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

nav {
    background-color: #333;
    padding: 10px;
    text-align: center;
}

nav button {
    background-color: #555;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 16px;
}

nav button:hover {
    background-color: #777;
}

#content {
    padding: 20px;
    transition: background-color 0.5s ease;
}
3. loader.css

/* loader.css */
/* Скрыть загрузочный экран по умолчанию */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Чёрный фон с небольшой прозрачностью */
    display: none; /* Скрыт по умолчанию */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Контейнер для контента загрузчика */
.loader-content {
    text-align: center;
    color: white;
}

.loader-text {
    margin-bottom: 10px;
    font-size: 18px;
}

#loader-text-bottom {
    margin-top: 10px;
    font-size: 16px;
    color: #ccc;
}

/* Спиннер */
.spinner {
    border: 12px solid #f3f3f3;
    border-top: 12px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
4. main.js

// 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');
    const buttons = document.querySelectorAll('nav button');

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

    const PAGE_RESOURCES_PATH = 'bin/js-page/'; // Базовый путь для ресурсов страниц

    // Функция для отображения загрузочного экрана с текстами
    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) => {
            // Удаляем предыдущий скрипт, если он существует
            const existingScript = document.getElementById('page-script');
            if (existingScript) {
                existingScript.remove();
            }

            // Создаем новый скрипт
            const script = document.createElement('script');
            script.src = `${PAGE_RESOURCES_PATH}${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_RESOURCES_PATH}${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;
        });
    }

    // Обработчики кликов по кнопкам навигации
    buttons.forEach(button => {
        button.addEventListener('click', async () => {
            const page = button.getAttribute('data-page');
            const loaderTop = button.getAttribute('data-loader-top');
            const loaderBottom = button.getAttribute('data-loader-bottom');

            try {
                // Отображаем загрузочный экран с переданными текстами
                showLoader(loaderTop, loaderBottom);

                // Загрузить CSS для страницы
                await loadStylesheet(page);

                // Загрузить JS для страницы
                await loadScript(page);

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

                hideLoader();
            } catch (error) {
                hideLoader();
                content.innerHTML = `<p>${error.message}</p>`;
                console.error(error);
            }
        });
    });
});
5. bin/js-page/page1.js

// page1.js
function renderPage() {
    return new Promise((resolve) => {
        const content = document.getElementById('content');
        // Применяем класс стилей для страницы 1
        content.className = 'page1-background'; // Добавляем фоновый стиль

        // Имитируем асинхронную загрузку или сложную отрисовку с задержкой
        setTimeout(() => {
            content.innerHTML = `
                <h1 class="page1-text">Страница 1</h1>
                <p class="page1-text">Это содержимое первой страницы.</p>
                <button class="page1-button">Особенная кнопка для Страницы 1</button>
            `;
            resolve();
        }, 1000); // Задержка 1 секунду для демонстрации
    });
}
6. bin/js-page/page2.js

// page2.js
function renderPage() {
    return new Promise((resolve) => {
        const content = document.getElementById('content');
        // Применяем класс стилей для страницы 2
        content.className = 'page2-background'; // Добавляем фоновый стиль

        // Имитируем асинхронную загрузку или сложную отрисовку с задержкой
        setTimeout(() => {
            content.innerHTML = `
                <h1 class="page2-text">Страница 2</h1>
                <p class="page2-text">Это содержимое второй страницы.</p>
                <button class="page2-button">Особенная кнопка для Страницы 2</button>
            `;
            resolve();
        }, 1000); // Задержка 1 секунду для демонстрации
    });
}
7. bin/js-page/page1.css

/* page1.css */
.page1-background {
    background-color: #f0f8ff; /* Светло-голубой фон */
}

.page1-text {
    color: #2e8b57; /* Зеленый цвет текста */
}

.page1-button {
    background-color: #2e8b57; /* Зеленая кнопка */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

.page1-button:hover {
    background-color: #3cb371; /* Более светлый зеленый при наведении */
}
8. bin/js-page/page2.css

/* page2.css */
.page2-background {
    background-color: #ffe4e1; /* Светло-розовый фон */
}

.page2-text {
    color: #8b0000; /* Темно-красный цвет текста */
}

.page2-button {
    background-color: #8b0000; /* Темно-красная кнопка */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

.page2-button:hover {
    background-color: #ff6347; /* Более светлый красный при наведении */
}