1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-23 23:21:05 +01:00

Add radial progress bar (#864)

* Revert "Revert "Add progressbar when upscaling image""

* Make bar primary

* make radial

* add aria values

Co-authored by @coderabbitai

---------

Co-authored-by: NayamAmarshe <nayam.emikx@aleeas.com>
This commit is contained in:
Aaron Liu 2024-08-14 03:02:42 -04:00 committed by GitHub
parent f1be357f8a
commit b22aa99bd6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -28,14 +28,14 @@ function ProgressBar({
<div className="flex flex-col items-center rounded-btn bg-base-100/50 p-4 backdrop-blur-lg">
<Logo className="spinner mb-4 h-12 w-12" />
<p className="rounded-full px-2 pb-2 font-bold">
{batchMode && "Batch Upscale In Progress: " + batchProgress}
{!batchMode &&
(doubleUpscaylCounter > 0
? `${progress}\nPass ${doubleUpscaylCounter}`
: `${progress}`)}
{batchMode && `Batch Upscayl In Progress: ${batchProgress}` }
</p>
{progress !== "Hold on..." ? (
<div className="radial-progress text-center" style={{ "--value": parseFloat(progress.replace("%", '')) }} role="progressbar" aria-valuenow={ parseFloat(progress.replace("%", '')) } aria-valuemin="0" aria-valuemax="100">
{progress}
{!batchMode && (doubleUpscaylCounter > 0) && "\nPass " + doubleUpscaylCounter}
</div>
) : progress}
<p className="animate-pulse rounded-full px-2 pb-3 text-sm font-medium">
Doing the Upscayl magic...
</p>