From 9345595626f71e86c2414686aacfc5b499e6fe05 Mon Sep 17 00:00:00 2001
From: "Aamon P. Hoffmann" <aamon.hoffmann@student.uni-halle.de>
Date: Sat, 4 Jan 2025 23:47:46 +0100
Subject: [PATCH] add spinner
---
public/style.css | 22 ++++++++++++++++++++++
src/Views/ForceDirectedGraph.elm | 13 ++++++++++++-
2 files changed, 34 insertions(+), 1 deletion(-)
diff --git a/public/style.css b/public/style.css
index 814a187..81ab0c2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -169,3 +169,25 @@ body {
.highlight {
stroke: red;
}
+
+.loader {
+ border: 16px solid #f3f3f3;
+ /* Light grey */
+ border-top: 16px solid #3498db;
+ /* Blue */
+ border-radius: 50%;
+ width: 120px;
+ height: 120px;
+ animation: spin 2s linear infinite;
+
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/Views/ForceDirectedGraph.elm b/src/Views/ForceDirectedGraph.elm
index 4c5bb49..0fbeffd 100644
--- a/src/Views/ForceDirectedGraph.elm
+++ b/src/Views/ForceDirectedGraph.elm
@@ -72,7 +72,18 @@ view global local =
]
, Html.div [ style "display" "flex", style "flex-direction" "row" ]
[ if local.loading then
- Html.div [ style "flex-grow" "1" ] [ Html.text "Loading..." ]
+ Html.div
+ [ style "flex-grow" "1"
+ , style "justify-items" "center"
+ , style "align-content" "center"
+ ]
+ [ Html.div [ class [ "loader" ] ] []
+ , Html.div
+ [ style "position" "relative"
+ , style "bottom" "5rem"
+ ]
+ [ Html.text "Loading..." ]
+ ]
else
Html.div [ style "flex-grow" "1", style "position" "relative" ]
--
GitLab