pengjunjie/webapp-conversation
1
0
Fork 1
mirror of https://github.com/langgenius/webapp-conversation.git synced 2025-12-23 15:56:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add ai thinking anim

Browse Source
This commit is contained in:
Joel
2023-05-12 14:16:53 +08:00
parent caf5b31ccd
commit 7a1b139f04
5 changed files with 124 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/components/chat/loading-anim/style.module.css Normal file
View File

@ -0,0 +1,82 @@
.dot-flashing {
position: relative;
animation: 1s infinite linear alternate;
animation-delay: 0.5s;
}
.dot-flashing::before,
.dot-flashing::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
animation: 1s infinite linear alternate;
}
.dot-flashing::before {
animation-delay: 0s;
}
.dot-flashing::after {
animation-delay: 1s;
}
@keyframes dot-flashing {
0% {
background-color: #667085;
}
50%,
100% {
background-color: rgba(102, 112, 133, 0.3);
}
}
@keyframes dot-flashing-avatar {
0% {
background-color: #155EEF;
}
50%,
100% {
background-color: rgba(21, 94, 239, 0.3);
}
}
.text,
.text::before,
.text::after {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #667085;
color: #667085;
animation-name: dot-flashing;
}
.text::before {
left: -7px;
}
.text::after {
left: 7px;
}
.avatar,
.avatar::before,
.avatar::after {
width: 2px;
height: 2px;
border-radius: 50%;
background-color: #155EEF;
color: #155EEF;
animation-name: dot-flashing-avatar;
}
.avatar::before {
left: -5px;
}
.avatar::after {
left: 5px;
}