gradio

1
<script lang="ts">
2
	export let layout = "bubble";
3
</script>
4

5
<div
6
	class="message pending"
7
	role="status"
8
	aria-label="Loading response"
9
	aria-live="polite"
10
	style:border-radius={layout === "bubble" ? "var(--radius-xxl)" : "none"}
11
>
12
	<span class="sr-only">Loading content</span>
13
	<div class="dot-flashing" />
14
	&nbsp;
15
	<div class="dot-flashing" />
16
	&nbsp;
17
	<div class="dot-flashing" />
18
</div>
19

20
<style>
21
	.pending {
22
		background: var(--color-accent-soft);
23
		display: flex;
24
		flex-direction: row;
25
		justify-content: center;
26
		align-items: center;
27
		align-self: center;
28
		gap: 2px;
29
		width: 100%;
30
		height: var(--size-16);
31
	}
32
	.dot-flashing {
33
		animation: flash 1s infinite ease-in-out;
34
		border-radius: 5px;
35
		background-color: var(--body-text-color);
36
		width: 7px;
37
		height: 7px;
38
		color: var(--body-text-color);
39
	}
40
	@keyframes flash {
41
		0%,
42
		100% {
43
			opacity: 0;
44
		}
45
		50% {
46
			opacity: 1;
47
		}
48
	}
49

50
	.dot-flashing:nth-child(1) {
51
		animation-delay: 0s;
52
	}
53

54
	.dot-flashing:nth-child(2) {
55
		animation-delay: 0.33s;
56
	}
57
	.dot-flashing:nth-child(3) {
58
		animation-delay: 0.66s;
59
	}
60
</style>
61