starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-06 21:05:15 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat(style): add delay to htmx indicator

Browse Source
This commit is contained in:
Herculino Trotta
2024-10-31 23:40:42 -03:00
parent edf07082e2
commit 26a6c72902
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/apps/net_worth/views.py
-1
View File
@@ -11,7 +11,6 @@ from apps.net_worth.utils.calculate_net_worth import (
) )
# Create your views here.
def net_worth_main(request): def net_worth_main(request):
currency_net_worth = calculate_currency_net_worth() currency_net_worth = calculate_currency_net_worth()
account_net_worth = calculate_account_net_worth() account_net_worth = calculate_account_net_worth()
frontend/src/styles/_animations.scss
+11 -1
View File
@@ -97,6 +97,11 @@
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.show-loading.htmx-request { .show-loading.htmx-request {
position: relative; position: relative;
top: 0; top: 0;
@@ -110,6 +115,9 @@
bottom: 0; bottom: 0;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
z-index: 100; z-index: 100;
animation: fadeIn 0.1s ease-in forwards;
animation-delay: 200ms;
opacity: 0;
} }
&::after { &::after {
@@ -122,7 +130,9 @@
border: 4px solid #f3f3f3; border: 4px solid #f3f3f3;
border-top: 4px solid $primary; border-top: 4px solid $primary;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite, fadeIn 0.1s ease-in forwards;
animation-delay: 200ms;
opacity: 0;
z-index: 101; z-index: 101;
} }
} }