alex/LocalAGI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip animation

Browse Source
This commit is contained in:
mudler
2024-04-06 20:37:09 +02:00
parent 215c3ddbf7
commit 015b26096f
2 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
example/webui/index.html
View File

@@ -22,6 +22,44 @@
.htmx-request .htmx-indicator{
opacity:1
}
/* https://cssloaders.github.io/ */
.loader {
width: 4px;
height: 20px;
border-radius: 4px;
display: block;
margin: 20px auto;
position: relative;
background: currentColor;
color: #FFF;
box-sizing: border-box;
animation: animloader 0.3s 0.3s linear infinite alternate;
}
.loader::after, .loader::before {
content: '';
width: 4px;
height: 20px;
border-radius: 4px;
background: currentColor;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
box-sizing: border-box;
animation: animloader 0.3s 0.45s linear infinite alternate;
}
.loader::before {
left: -20px;
animation-delay: 0s;
}
@keyframes animloader {
0% { height: 24px}
100% { height: 2px}
}
</style>
</head>
<body class="bg-gray-100 p-4">

2
example/webui/main.go
View File

@@ -204,7 +204,7 @@ func (a *App) Chat(m sse.Manager) func(w http.ResponseWriter, r *http.Request) {
m.Send(
sse.NewMessage(
chatDiv("...", "red") + "<script> document.getElementById('inputMessage').disabled = true;</script>",
`<div class="p-2 my-2 rounded bg-gray-100"><span class="loader"></span></div><script> document.getElementById('inputMessage').disabled = true;</script>`,
).WithEvent("message_status"))
}
}