File size: 950 Bytes
878d1fe |
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 |
<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(--background-fill-secondary);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-self: center;
gap: 2px;
width: 100%;
height: 100%;
}
.dot-flashing {
animation: dot-flashing 1s infinite linear alternate;
border-radius: 5px;
background-color: var(--body-text-color);
width: 5px;
height: 5px;
color: var(--body-text-color);
}
.dot-flashing:nth-child(2) {
animation-delay: 0.33s;
}
.dot-flashing:nth-child(3) {
animation-delay: 0.66s;
}
</style>
|