mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-27 02:30:17 +08:00
e76a9e8fcb
* fix * add changeset * fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
61 lines
1.1 KiB
Svelte
61 lines
1.1 KiB
Svelte
<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>
|