improved feedback when loading ajax content

This commit is contained in:
thomas girod
2024-08-08 20:20:09 +02:00
parent 20c015c312
commit 7ea9a5ca2d
4 changed files with 56 additions and 23 deletions

View File

@ -93,6 +93,32 @@ a:not(.button) {
}
}
[aria-busy] {
--loading-size: 50px;
--loading-stroke: 5px;
--loading-duration: 1s;
position: relative;
}
[aria-busy]:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--loading-size);
height: var(--loading-size);
margin-top: calc(var(--loading-size) / 2 * -1);
margin-left: calc(var(--loading-size) / 2 * -1);
border: var(--loading-stroke) solid rgba(0, 0, 0, .15);
border-radius: 50%;
border-top-color: rgba(0, 0, 0, 0.5);
animation: rotate calc(var(--loading-duration)) linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
.ib {
display: inline-block;
padding: 1px;