wip animation

2024-04-06 20:37:09 +02:00
parent 215c3ddbf7
commit 015b26096f
2 changed files with 39 additions and 1 deletions
--- a/example/webui/index.html
+++ b/example/webui/index.html
@@ -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">