EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure loading indicator when entering booking flow in Chrome

Browse Source
This commit is contained in:
Björn Fromme
2026-03-16 12:03:00 +01:00
parent 1670b8b8d2
commit 29a1ce7de7
3 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_partials/_loading_indicator.html.twig
+1 -41
View File
@@ -1,44 +1,4 @@
<div id="loading-indicator"
class="invisible fixed top-0 left-0 inset-0 z-50 backdrop-blur-sm flex items-center justify-center transition-all duration-100">
<svg class="{{ html_classes('w-32 h-32 lg:w-48 lg:h-48', {
'text-primary-light': booking_theme() == 'base',
'text-sbw-secondary': booking_theme() == 'sbw',
'text-snz-secondary': booking_theme() == 'snz',
'text-ser-secondary': booking_theme() == 'ser',
}) }}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
<g fill="none" fill-rule="evenodd" stroke-width="2">
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="0s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="0s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="-0.9s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="-0.9s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
</g>
</svg>
{% include '_partials/_spinner.html.twig' %}
</div>
templates/_partials/_spinner.html.twig
+41
View File
@@ -0,0 +1,41 @@
<svg class="{{ html_classes(class|default('w-32 h-32 lg:w-48 lg:h-48'), {
'text-primary-light': booking_theme() == 'base',
'text-sbw-secondary': booking_theme() == 'sbw',
'text-snz-secondary': booking_theme() == 'snz',
'text-ser-secondary': booking_theme() == 'ser',
}) }}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
<g fill="none" fill-rule="evenodd" stroke-width="2">
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="0s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="0s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="-0.9s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="-0.9s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB