26 lines
507 B
CSS

.htmx-indicator {
opacity: 0;
height: .5vh;
left: 0;
width: 100%;
background-color: var(--color);
transition: opacity .2s ease-out, width .2s ease-out;
}
.htmx-indicator.htmx-request {
opacity: 1;
/* if I'd be smart, I would use the Content-Length header in some way to determine the duration */
animation: progressbar 1s ease-in-out;
}
@keyframes progressbar {
from {
left: 0;
width: 0;
}
to {
left: 0;
width: 100%;
}
}