thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

KI-Chat: Warte-Indikator als gestaffelte Bounce-Animation

Browse Source 
Drei Punkte mit gestaffeltem Animation-Delay (klassische Tipp-Animation),
inkl. prefers-reduced-motion-Fallback (statisch).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-07 14:48:04 +00:00
co-authored by Claude
parent 61b67e0843
commit d2545c4faf
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/chat.ejs
+16 -1
View File
@@ -5,7 +5,22 @@
<style> <style>
#chatLog::-webkit-scrollbar { width: 8px; } #chatLog::-webkit-scrollbar { width: 8px; }
#chatLog::-webkit-scrollbar-thumb { background: rgba(120,120,120,.4); border-radius: 4px; } #chatLog::-webkit-scrollbar-thumb { background: rgba(120,120,120,.4); border-radius: 4px; }
.typing-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; display: inline-block; } /* Typing indicator: three dots with a staggered bounce. */
.typing-dot {
width: 7px; height: 7px; border-radius: 9999px;
background: currentColor; display: inline-block;
opacity: 0.35;
animation: chat-typing 1.2s infinite ease-in-out both;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-typing {
0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
40% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.typing-dot { animation: none; opacity: 0.6; }
}
/* Markdown rendering inside assistant bubbles */ /* Markdown rendering inside assistant bubbles */
.chat-md { line-height: 1.5; } .chat-md { line-height: 1.5; }
.chat-md > *:first-child { margin-top: 0; } .chat-md > *:first-child { margin-top: 0; }