/* ────────────────────────────────────────────────────────────────── AWWEE · loading indicator (vanilla CSS) Drop the markup below into your chat thread where Awwee's next reply would appear. No JS required.
Awwee AI
Thinking...
Required fonts (load once in ): Bricolage Grotesque — name DM Sans — thinking text Space Grotesk — AI badge ────────────────────────────────────────────────────────────────── */ .awwee-loading { --aw-yellow: #FEB602; --aw-yellow-dk: #E89F00; --aw-yellow-lt: #FFF1C2; --aw-green: #2BC26A; --aw-ink: #0F0D0B; --aw-muted: rgba(15,13,11,.60); /* set to "dark" on a parent (e.g. body.theme-dark) to flip */ display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 4px 0; font-family: 'DM Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; animation: awwee-loading-fadein .4s ease-out both; } @keyframes awwee-loading-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Row: avatar + twinkle ───────────────────────────────────────── */ .awwee-loading__row { display: flex; align-items: center; gap: 8px; } /* ── Avatar ───────────────────────────────────────────────────────── */ .awwee-loading__av { width: 26px; height: 26px; border-radius: 50%; position: relative; flex-shrink: 0; background: radial-gradient(circle at 32% 30%, #fff4c2 0%, var(--aw-yellow) 55%, var(--aw-yellow-dk) 100%); box-shadow: inset 0 -2px 3px rgba(232,159,0,.50), inset 0 1.5px 2px rgba(255,255,255,.50), 0 3px 8px -2px rgba(232,159,0,.40); } /* Eyes — centered + blinking */ .awwee-loading__av::before, .awwee-loading__av::after { content: ""; position: absolute; width: 4px; height: 4px; background: var(--aw-ink); border-radius: 50%; top: 50%; left: 50%; transform-origin: center; } .awwee-loading__av::before { animation: awwee-loading-blinkL 3.6s ease-in-out infinite; } .awwee-loading__av::after { animation: awwee-loading-blinkR 3.6s ease-in-out infinite; } @keyframes awwee-loading-blinkL { 0%, 35%, 43%, 100% { transform: translate(-50%,-50%) translateX(-4.2px) scaleY(1); } 37%, 41% { transform: translate(-50%,-50%) translateX(-4.2px) scaleY(0.08); } } @keyframes awwee-loading-blinkR { 0%, 35%, 43%, 100% { transform: translate(-50%,-50%) translateX(4.2px) scaleY(1); } 37%, 41% { transform: translate(-50%,-50%) translateX(4.2px) scaleY(0.08); } } /* ── Green presence dot ──────────────────────────────────────────── */ .awwee-loading__dot { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--aw-green); box-shadow: 0 0 0 2px var(--aw-bg, #FBF7EE); /* set --aw-bg on parent to match its surface */ animation: awwee-loading-dotblink 1.6s ease-in-out infinite; } .awwee-loading__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--aw-green); animation: awwee-loading-dotpulse 1.8s ease-out infinite; } @keyframes awwee-loading-dotblink { 0%, 100% { opacity: 1; } 50% { opacity: .6; } } @keyframes awwee-loading-dotpulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } } /* ── Twinkle field ───────────────────────────────────────────────── */ .awwee-loading__twinkle { position: relative; width: 64px; height: 18px; } .awwee-loading__twinkle span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--aw-yellow); box-shadow: 0 0 6px var(--aw-yellow), 0 0 12px var(--aw-yellow-lt); opacity: 0; animation: awwee-loading-twink 3.6s ease-in-out infinite; } .awwee-loading__twinkle span:nth-child(1) { left: 4%; top: 30%; animation-delay: 0; } .awwee-loading__twinkle span:nth-child(2) { left: 22%; top: 65%; animation-delay: .5s; } .awwee-loading__twinkle span:nth-child(3) { left: 40%; top: 20%; animation-delay: 1.0s; } .awwee-loading__twinkle span:nth-child(4) { left: 58%; top: 60%; animation-delay: 1.5s; } .awwee-loading__twinkle span:nth-child(5) { left: 76%; top: 25%; animation-delay: 2.0s; } .awwee-loading__twinkle span:nth-child(6) { left: 92%; top: 55%; animation-delay: 2.5s; } @keyframes awwee-loading-twink { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 30%, 40% { opacity: 1; transform: scale(1.2); } } /* ── Name + AI badge ─────────────────────────────────────────────── */ .awwee-loading__name { display: inline-flex; align-items: center; gap: 3px; font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 9.5px; letter-spacing: -.012em; line-height: 1; color: var(--aw-ink); } .awwee-loading__badge { font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 6.5px; letter-spacing: .12em; background: var(--aw-yellow); color: var(--aw-ink); padding: 1px 3px; border-radius: 2.5px; text-transform: uppercase; } /* ── "Thinking…" with bouncing dots ──────────────────────────────── */ .awwee-loading__thinking { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: -.005em; color: var(--aw-muted); display: inline-flex; align-items: baseline; } .awwee-loading__dots { display: inline-flex; margin-left: 2px; } .awwee-loading__dots span { display: inline-block; animation: awwee-loading-thinkdot 1.4s ease-in-out infinite; } .awwee-loading__dots span:nth-child(2) { animation-delay: .18s; } .awwee-loading__dots span:nth-child(3) { animation-delay: .36s; } @keyframes awwee-loading-thinkdot { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-1.5px); } } /* ───────────────────────────────────────────────────────────────── DARK THEME Apply by adding the `.awwee-loading--dark` modifier OR by setting `.theme-dark .awwee-loading { … }` selectors from a parent. ───────────────────────────────────────────────────────────────── */ .awwee-loading--dark, .theme-dark .awwee-loading { --aw-muted: rgba(255,255,255,.66); } .awwee-loading--dark .awwee-loading__dot, .theme-dark .awwee-loading .awwee-loading__dot { box-shadow: 0 0 0 2px var(--aw-bg, #100E0C); } .awwee-loading--dark .awwee-loading__twinkle span, .theme-dark .awwee-loading .awwee-loading__twinkle span { box-shadow: 0 0 8px var(--aw-yellow), 0 0 14px var(--aw-yellow-lt); } .awwee-loading--dark .awwee-loading__name, .theme-dark .awwee-loading .awwee-loading__name { color: #fff; }