AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move from progress bar to circle/spinner

Browse source
This commit is contained in:
Stewart Allen 2026-02-22 17:34:51 -05:00
commit b554a8703b
4 changed files with 106 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

94
web/kiri/index.css
View file

@ -282,11 +282,6 @@ details[open] summary::after {
.dark #alert-border:hover {
background-color: rgba(255,255,255,0.7);
}
.dark #progress {
background-color: #333;
border-top: 1px solid #555;
border-bottom: 1px solid #555;
}
.dark #mesh-info label,
.dark #mode-info label
{
@ -1552,35 +1547,70 @@ details[open] summary::after {
top: 0;
}
#progress {
left: 0;
right: 0;
height: 6px;
min-height: 6px;
text-align: center;
background-color: rgb(220,220,220);
border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
#progbar {
width: 0;
text-align: left;
position: relative;
background-color: rgb(255,90,90);
}
#progtxt {
display: none;
position: absolute;
left: 0;
right: 0;
top: 200%;
color: #888;
margin: 0 5px 0 5px;
padding: 0 5px 2px 5px;
white-space: nowrap;
flex-direction: row;
#progress-overlay {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
background: rgba(0,0,0,0.08);
}
#progress-indicator {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 120px;
padding: 14px 18px 12px;
border: 1px solid var(--border-gray);
border-radius: 10px;
background: var(--menubar-back);
color: var(--menubar-fore);
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
#progress-ring {
--progress-deg: 0deg;
width: 56px;
height: 56px;
border-radius: 50%;
background:
radial-gradient(circle at center, transparent 58%, var(--menubar-back) 59%),
conic-gradient(var(--appname-blue) var(--progress-deg), rgba(128,128,128,0.25) 0);
}
#progress-ring.indeterminate {
background: none;
border: 5px solid rgba(128,128,128,0.3);
border-top-color: var(--appname-blue);
animation: progress-spin 0.9s linear infinite;
}
#progress-pct {
min-height: 16px;
font-size: 12px;
font-weight: 600;
color: var(--menubar-fore);
}
#progtxt {
min-height: 16px;
max-width: 280px;
text-align: center;
font-size: 12px;
color: var(--menubar-fore);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes progress-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#dialog {

10
web/kiri/index.html
View file

@ -56,8 +56,14 @@
<!-- top menu bar -->
<div id="menubar" class="f-row"></div>
<!-- line betwwen menu bar and main application windows -->
<div id="progress"><div id="progbar"></div><div id="progtxt">loading</div></div>
<!-- modal progress overlay -->
<div id="progress-overlay" class="hide">
<div id="progress-indicator">
<div id="progress-ring"></div>
<div id="progress-pct"></div>
<div id="progtxt"></div>
</div>
</div>
<!-- toolbar with mesh and rendering options -->
<div id="mode-tools"></div>