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 {
width: 200px;
height: 4px;
height: 6px;
}
.progress-bar-chat {
height: 4px;
background-color: rgba(5, 114, 206, 0.2);
height: 6px;
background-color: rgba(5, 114, 206, 0.15);
width: 100%;
overflow: hidden;
border-radius: 999px;
}
.progress-bar-indeterminate {
width: 100%;
width: 40%;
height: 100%;
background-color: rgb(5, 114, 206);
animation: indeterminate-animation 1s infinite linear;
transform-origin: 0% 50%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(5, 114, 206, 0) 0%, rgb(5, 114, 206) 50%, rgba(5, 114, 206, 0) 100%);
animation: indeterminate-animation 1.4s infinite cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes indeterminate-animation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
transform: translateX(-100%);
}
100% {
transform: translateX(100%) scaleX(0.5);
transform: translateX(350%);
}
}
@media (prefers-reduced-motion: reduce) {
.progress-bar-indeterminate {
animation-duration: 3s;
}
}