Экран загрузки с маленьким окном, в котором десять ячеек заполняются рывками, а под ними растёт процент. По ходу прогресса вокруг на пружине выпрыгивают карточки с текстом, их можно хватать и перетаскивать.
Когда загрузка заканчивается, экран уезжает вверх и открывает страницу. Скорость заполнения, цвета и тексты карточек задаются пропсами.
Скопируйте эти файлы в components/box-preloader/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { BoxPreloader } from "@/components/box-preloader/box-preloader";
export default function Page() {
return (
<div className="relative h-screen w-full">
<BoxPreloader label="Загрузка" speed={1} />
</div>
);
}label?Заголовок окна с ячейками
Тип string·По умолчанию "Загрузка"
infoTitle?Заголовок карточки с текстом
Тип string·По умолчанию "полезное"
infoText?Текст карточки
Тип ReactNode·По умолчанию текст о загрузке
collectionText?Содержимое повёрнутой карточки слева
Тип ReactNode·По умолчанию текст коллекции
signatureText?Содержимое повёрнутой карточки справа
Тип ReactNode·По умолчанию подпись с сердцем
speed?Множитель скорости заполнения ячеек
Тип number·По умолчанию 1
fillColor?Цвет заполненных ячеек
Тип string·По умолчанию #121212
background?Цвет фона экрана
Тип string·По умолчанию #f1f1f2