Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-06 11:40:28 -05:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat(loading): Replace loading animation with a simpler spinner and loading text

Browse Source
This commit is contained in:
web@ppanel 2025-03-14 13:40:56 +07:00
parent dddc21c686
commit b8316bba33
1 changed files with 4 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/user/components/loading.tsx
View File

@ -11,21 +11,10 @@ export default function Loading({ loading = true }: LoadingProps) {
: 'pointer-events-none bg-transparent opacity-0 backdrop-blur-0'
}`}
>
<div
className={`transform-gpu transition-all duration-500 ${
loading ? 'scale-100 opacity-100' : 'scale-50 opacity-0'
}`}
>
<div className='relative h-32 w-32 animate-[spin_3s_linear_infinite] overflow-hidden rounded-full shadow-[0_0_15px_rgba(0,0,0,0.1)] dark:shadow-[0_0_15px_rgba(255,255,255,0.1)]'>
<div className='absolute inset-0 h-full w-full rounded-full bg-black shadow-inner dark:bg-white'>
<div className='absolute right-0 top-0 h-full w-1/2 rounded-r-full bg-white shadow-sm dark:bg-black' />
<div className='absolute left-1/2 top-0 h-1/2 w-1/2 -translate-x-1/2 rounded-full bg-white shadow-sm dark:bg-black'>
<div className='absolute left-1/2 top-1/2 h-1/4 w-1/4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black shadow-inner dark:bg-white' />
</div>
<div className='absolute bottom-0 left-1/2 h-1/2 w-1/2 -translate-x-1/2 rounded-full bg-black shadow-sm dark:bg-white'>
<div className='absolute left-1/2 top-1/2 h-1/4 w-1/4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-inner dark:bg-black' />
</div>
</div>
<div className='flex min-h-screen items-center justify-center'>
<div className='text-center'>
<div className='border-primary mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-t-2'></div>
<p className='text-muted-foreground text-lg'>Loading...</p>
</div>
</div>
</div>