diff --git a/public/style.css b/public/style.css
index 814a187c80c1689e4bba44324c8f1232ffa62894..81ab0c2e5847b9f8f195f9828f38f138d6fe4b43 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 4c5bb4997a2806fbca715b3f162f4ba8e902fda7..0fbeffd9d5482d321b6216c91570619e8cd4ca76 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" ]