Spaces:
Runtime error
Runtime error
File size: 1,082 Bytes
e20bcf8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<script lang="ts">
export let layout = "bubble";
</script>
<div
class="message pending"
role="status"
aria-label="Loading response"
aria-live="polite"
style:border-radius={layout === "bubble" ? "var(--radius-xxl)" : "none"}
>
<span class="sr-only">Loading content</span>
<div class="dot-flashing" />
<div class="dot-flashing" />
<div class="dot-flashing" />
</div>
<style>
.pending {
background: var(--color-accent-soft);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-self: center;
gap: 2px;
width: 100%;
height: var(--size-16);
}
.dot-flashing {
animation: flash 1s infinite ease-in-out;
border-radius: 5px;
background-color: var(--body-text-color);
width: 7px;
height: 7px;
color: var(--body-text-color);
}
@keyframes flash {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.dot-flashing:nth-child(1) {
animation-delay: 0s;
}
.dot-flashing:nth-child(2) {
animation-delay: 0.33s;
}
.dot-flashing:nth-child(3) {
animation-delay: 0.66s;
}
</style>
|