diff options
| author | winter | 2025-01-17 17:40:58 +0000 |
|---|---|---|
| committer | winter | 2025-01-17 17:40:58 +0000 |
| commit | 8d7727e6d1a8f69dbe43390a3ef2f7a7880c42bc (patch) | |
| tree | 87811f846c136a45268d23d7436cb689094468a2 | |
| parent | 3bd6cf6cd2eda9aa95c734df58af11bbae57ce04 (diff) | |
add a loading indicator
| -rw-r--r-- | routes/static.php | 2 | ||||
| -rw-r--r-- | static/misc.css | 7 | ||||
| -rw-r--r-- | static/skeleton.css | 9 | ||||
| -rw-r--r-- | static/tail-spin.svg | 32 | ||||
| -rw-r--r-- | templates/skeleton.php | 3 |
5 files changed, 51 insertions, 2 deletions
diff --git a/routes/static.php b/routes/static.php index 2850d8f..0944014 100644 --- a/routes/static.php +++ b/routes/static.php @@ -13,6 +13,8 @@ Router::getInstance()->mount('/static/:path', function (array $args) { $fileExtension = $fileExtension[count($fileExtension) - 1]; header('Content-Type: ' . match ($fileExtension) { 'css' => 'text/css', + 'js' => 'application/javascript', + 'svg' => 'image/svg+xml', default => mime_content_type($realPath) }); echo file_get_contents($realPath); 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 diff --git a/templates/skeleton.php b/templates/skeleton.php index fced6b8..b274484 100644 --- a/templates/skeleton.php +++ b/templates/skeleton.php @@ -17,7 +17,7 @@ $user = Digitigrade\Model\UserAccount::findByCurrentSession(); <script src="/static/language-switch.js" defer></script> </head> -<body hx-boost="true"> +<body hx-boost="true" hx-indicator="#loadingIndicator"> <header> <nav> <?php @@ -29,6 +29,7 @@ $user = Digitigrade\Model\UserAccount::findByCurrentSession(); call_template('navigation_links', ['links' => $links]); ?> <span id="siteTitle"><?= __('digitigrade') ?></span> + <img id="loadingIndicator" class="htmx-indicator" src="/static/tail-spin.svg"> <?php if ($user == null): call_template('navigation_links', ['links' => [ '/login' => __('navigation.login') |
