Mirrors/SqlDatabaseVectorSearch
1
0
Fork 0
mirror of https://github.com/marcominerva/SqlDatabaseVectorSearch.git synced 2026-08-04 09:48:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign chat progress bar with new gradient animation

Browse Source 
The chat UI progress bar was visually updated: height increased to 6px, background made more transparent, and corners fully rounded. The indeterminate bar now uses a gradient with a moving highlight animation, which is slower for users with reduced motion preferences. Animation duration and style were refined for improved accessibility and aesthetics.
This commit is contained in:
Marco Minerva
2026-07-28 15:16:25 +02:00
parent f9f75cdf7c
commit a225d61b3f
1 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
+16 -13
View File
@@ -45,35 +45,38 @@ input[type="checkbox"] + label {
.progress-chat { .progress-chat {
width: 200px; width: 200px;
height: 4px; height: 6px;
} }
.progress-bar-chat { .progress-bar-chat {
height: 4px; height: 6px;
background-color: rgba(5, 114, 206, 0.2); background-color: rgba(5, 114, 206, 0.15);
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 999px;
} }
.progress-bar-indeterminate { .progress-bar-indeterminate {
width: 100%; width: 40%;
height: 100%; height: 100%;
background-color: rgb(5, 114, 206); border-radius: 999px;
animation: indeterminate-animation 1s infinite linear; background: linear-gradient(90deg, rgba(5, 114, 206, 0) 0%, rgb(5, 114, 206) 50%, rgba(5, 114, 206, 0) 100%);
transform-origin: 0% 50%; animation: indeterminate-animation 1.4s infinite cubic-bezier(0.65, 0, 0.35, 1);
} }
@keyframes indeterminate-animation { @keyframes indeterminate-animation {
0% { 0% {
transform: translateX(0) scaleX(0); transform: translateX(-100%);
}
40% {
transform: translateX(0) scaleX(0.4);
} }
100% { 100% {
transform: translateX(100%) scaleX(0.5); transform: translateX(350%);
}
}
@media (prefers-reduced-motion: reduce) {
.progress-bar-indeterminate {
animation-duration: 3s;
} }
} }