Skip to content
Snippets Groups Projects
Commit 902120c1 authored by Stefano Alberto Russo's avatar Stefano Alberto Russo
Browse files

Added the loader when navigating between pages.

parent 3b9f8748
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
services/webapp/code/rosetta/core_app/static/css/loader.css 0 → 100644
+ 29
− 0
View file @ 902120c1
@keyframes spin {
to {
transform: rotate(360deg);
}
}
#navigate-away-loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
color: white;
transition: opacity 0.4s ease-in-out;
visibility: hidden;
pointer-events: none;
display: flex;
& > svg {
animation: spin 1.5s infinite linear;
opacity: 0.5;
}
}
services/webapp/code/rosetta/core_app/static/js/loader.js 0 → 100644
+ 24
− 0
View file @ 902120c1
function showNavigationLoader() {
var navigationLoader = document.querySelector("#navigate-away-loader")
navigationLoader.style.visibility = "visible"
navigationLoader.style.opacity = 1
navigationLoader.style.pointerEvents = "all"
document.querySelector("#navigate-away-loader > svg").style.animation =
"spin 1.5s infinite linear"
}
function hideNavigationLoader() {
var navigationLoader = document.querySelector("#navigate-away-loader")
navigationLoader.style.visibility = "hidden"
navigationLoader.style.opacity = 0
navigationLoader.style.pointerEvents = "none"
}
window.addEventListener("beforeunload", function (e) {
showNavigationLoader()
return true
})
window.addEventListener("pageshow", function (e) {
hideNavigationLoader()
})
services/webapp/code/rosetta/core_app/templates/header.html
+ 12
− 1
View file @ 902120c1
...@@ -59,7 +59,18 @@ ...@@ -59,7 +59,18 @@
<!-- Date time picker --> <!-- Date time picker -->
<script src="/static/js/bootstrap-datetimepicker-4.17.47.js"></script> <script src="/static/js/bootstrap-datetimepicker-4.17.47.js"></script>
<!-- Loader -->
<link rel="stylesheet" href="/static/css/loader.css">
<script src="/static/js/loader.js"></script>
</head> </head>
<body {{ body_args }}> <body {{ body_args }}>
<div id="navigate-away-loader">
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
<path d="M21 3v5h-5" />
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
<path d="M8 16H3v5" />
</svg>
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment