diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/misc.css | 7 | ||||
| -rw-r--r-- | static/skeleton.css | 9 | ||||
| -rw-r--r-- | static/tail-spin.svg | 32 |
3 files changed, 47 insertions, 1 deletions
diff --git a/static/misc.css b/static/misc.css index 6b88e63..4271cbe 100644 --- a/static/misc.css +++ b/static/misc.css @@ -80,6 +80,13 @@ span.unreadIndicator { } } +.htmx-indicator { + visibility: hidden; + &.htmx-request { + visibility: inherit; + } +} + [hidden] { display: none; } diff --git a/static/skeleton.css b/static/skeleton.css index 6526c29..e38f49f 100644 --- a/static/skeleton.css +++ b/static/skeleton.css @@ -36,13 +36,20 @@ nav { height: 32px; box-sizing: border-box; display: grid; - grid-template-columns: 1fr max-content 1fr; + grid-template-columns: 1fr max-content 0 1fr; align-items: center; > * { margin: 0 8px; } + #loadingIndicator { + width: calc(var(--icon-size) * 0.75); + aspect-ratio: 1; + position: relative; + color: var(--clr-foreground-on-primary); + } + > :last-child { display: grid; grid-template-columns: 1fr max-content; diff --git a/static/tail-spin.svg b/static/tail-spin.svg new file mode 100644 index 0000000..3796502 --- /dev/null +++ b/static/tail-spin.svg @@ -0,0 +1,32 @@ +<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> +<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"> + <stop stop-color="#fff" stop-opacity="0" offset="0%" /> + <stop stop-color="#fff" stop-opacity=".631" offset="63.146%" /> + <stop stop-color="#fff" offset="100%" /> + </linearGradient> + </defs> + <g fill="none" fill-rule="evenodd"> + <g transform="translate(1 1)"> + <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2"> + <animateTransform + attributeName="transform" + type="rotate" + from="0 18 18" + to="360 18 18" + dur="0.9s" + repeatCount="indefinite" /> + </path> + <circle fill="#fff" cx="36" cy="18" r="1"> + <animateTransform + attributeName="transform" + type="rotate" + from="0 18 18" + to="360 18 18" + dur="0.9s" + repeatCount="indefinite" /> + </circle> + </g> + </g> +</svg>
\ No newline at end of file |
