BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

add loading indicator

Browse Source
This commit is contained in:
SethBurkart123
2023-10-23 23:11:38 +11:00
parent c36cd02f47
commit f8eea11a5f
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/src/pages/Themes.tsx
+9 -5
View File
@@ -183,6 +183,8 @@ const handlePresetClick = async (bg: Background): Promise<void> => {
localStorage.removeItem('selectedBackground');
};
const calcCircumference = (radius: number) => 2 * Math.PI * radius;
useEffect(() => {
loadBackgrounds();
}, []);
@@ -224,14 +226,16 @@ const handlePresetClick = async (bg: Background): Promise<void> => {
onClick={() => handlePresetClick(bg)}
className='relative w-16 h-16 transition cursor-pointer rounded-xl'>
{bg.isPreset && downloadProgress[bg.id] !== undefined && (
<div className="absolute top-0 left-0 z-20 h-1 bg-blue-500" style={{ width: `${downloadProgress[bg.id]}%` }}></div>
<div className="absolute top-0 left-0 z-20 flex items-center justify-center w-full h-full">
<svg className="w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
<circle stroke="currentColor" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset="0" transform="rotate(-90 18 18)"></circle>
<circle stroke="#3B82F6" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset={`${calcCircumference(14) * (1 - (downloadProgress[bg.id] / 100))}`} transform="rotate(-90 18 18)"></circle>
</svg>
</div>
)}
<div className="relative top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center">
<span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
</span>
<span className="absolute text-3xl text-black transition opacity-0 blur-sm font-IconFamily group-hover:opacity-100">
{downloadProgress[bg.id] === undefined ? '' : ''}
</span>
</div>
<img