File size: 3,585 Bytes
adc1e1c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | /*
Copyright (c) 2025 Tethys Plex
This file is part of Veloera.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React from 'react';
const Loading = ({ prompt: name = 'page' }) => {
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh'
}}>
<div style={{
width: '200px',
height: '200px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}>
<svg viewBox="0 0 140 140" fill="none" style={{
width: '140px',
height: '140px'
}}>
<title>Loading {name}</title>
<defs>
<linearGradient id="gradient" x1="70" y1="0" x2="70" y2="140" gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor="var(--primary, #AAE4FF)" />
<stop offset="100%" stopColor="var(--primary-foreground, #38BDF8)" />
</linearGradient>
</defs>
<g style={{
animation: 'rotate 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite',
transformOrigin: 'center'
}}>
<g style={{
animation: 'pulsateLeft 6s ease-in-out infinite',
transformOrigin: 'center'
}}>
<path
d="M70,70 m0,-52 a52,52 0 1,1 0,104 a52,52 0 1,1 0,-104 z M70,70 m0,-32 a32,32 0 0,0 0,64 a32,32 0 0,0 0,-64 z"
fill="url(#gradient)"
fillRule="evenodd"
clipRule="evenodd"
/>
</g>
</g>
<g style={{
animation: 'rotate 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite',
transformOrigin: 'center'
}}>
<g style={{
animation: 'pulsateRight 6s ease-in-out infinite',
transformOrigin: 'center'
}}>
<path
d="M70,70 m-52,0 a52,52 0 1,0 104,0 a52,52 0 1,0 -104,0 z M70,70 m-32,0 a32,32 0 1,1 64,0 a32,32 0 1,1 -64,0 z"
fill="url(#gradient)"
fillRule="evenodd"
clipRule="evenodd"
/>
</g>
</g>
</svg>
<style>
{`
@keyframes rotate {
0%, 70% { transform: rotate(0deg); }
30%, 40% { transform: rotate(720deg); }
}
@keyframes pulsateLeft {
0%, 40%, 60%, 80%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
70% { transform: scale(1.1); }
90% { transform: scale(1.05); }
}
@keyframes pulsateRight {
0%, 50%, 70%, 90%, 100% { transform: scale(1); }
40% { transform: scale(1.15); }
60% { transform: scale(1.1); }
80% { transform: scale(1.05); }
}
`}
</style>
</div>
</div>
);
};
export default Loading;
|