46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
|
// @unocss-include
|
||
|
|
import { getRgbOfColor } from '@sa/utils';
|
||
|
|
import { $t } from '@/locales';
|
||
|
|
import { localStg } from '@/utils/storage';
|
||
|
|
import systemLogo from '@/assets/svg-icon/logo.svg?raw';
|
||
|
|
|
||
|
|
export function setupLoading() {
|
||
|
|
const themeColor = localStg.get('themeColor') || '#646cff';
|
||
|
|
|
||
|
|
const { r, g, b } = getRgbOfColor(themeColor);
|
||
|
|
|
||
|
|
const primaryColor = `--primary-color: ${r} ${g} ${b}`;
|
||
|
|
|
||
|
|
const loadingClasses = [
|
||
|
|
'left-0 top-0',
|
||
|
|
'left-0 bottom-0 animate-delay-500',
|
||
|
|
'right-0 top-0 animate-delay-1000',
|
||
|
|
'right-0 bottom-0 animate-delay-1500'
|
||
|
|
];
|
||
|
|
|
||
|
|
const logoWithClass = systemLogo.replace('<svg', `<svg class="size-128px text-primary"`);
|
||
|
|
|
||
|
|
const dot = loadingClasses
|
||
|
|
.map(item => {
|
||
|
|
return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`;
|
||
|
|
})
|
||
|
|
.join('\n');
|
||
|
|
|
||
|
|
const loading = `
|
||
|
|
<div class="fixed-center flex-col" style="${primaryColor}">
|
||
|
|
${logoWithClass}
|
||
|
|
<div class="w-56px h-56px my-36px">
|
||
|
|
<div class="relative h-full animate-spin">
|
||
|
|
${dot}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
|
||
|
|
</div>`;
|
||
|
|
|
||
|
|
const app = document.getElementById('app');
|
||
|
|
|
||
|
|
if (app) {
|
||
|
|
app.innerHTML = loading;
|
||
|
|
}
|
||
|
|
}
|