Fix spinner CSS

voila-dashboards · Oct 4, 2019 · 37385b9 · 37385b9
1 parent 7e4a648
commit 37385b9
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/share/jupyter/voila/templates/default/nbconvert_templates/voila.tpl b/share/jupyter/voila/templates/default/nbconvert_templates/voila.tpl
@@ -36,6 +36,7 @@ a.anchor-link {
   <style>
     #loading {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         height: 75vh;
@@ -48,6 +49,10 @@ a.anchor-link {
       transform-origin: 50% 50%;
     }
 
+    .spinner-container {
+      width: 10%;
+    }
+
     @keyframes rotation {
       from {transform: rotate(0deg);}
       to   {transform: rotate(359deg);}
@@ -71,10 +76,10 @@ a.anchor-link {
 <body class="jp-Notebook theme-light" data-base-url="{{resources.base_url}}voila/">
 {% endif %}
   <div id="loading">
-    <h2>
+    <div class="spinner-container">
       <svg class="spinner" data-name="c1" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>voila</dc:title></cc:Work></rdf:RDF></metadata><title>spin</title><path class="voila-spinner-color1" d="m250 405c-85.47 0-155-69.53-155-155s69.53-155 155-155 155 69.53 155 155-69.53 155-155 155zm0-275.5a120.5 120.5 0 1 0 120.5 120.5 120.6 120.6 0 0 0-120.5-120.5z"/><path class="voila-spinner-color2" d="m250 405c-85.47 0-155-69.53-155-155a17.26 17.26 0 1 1 34.51 0 120.6 120.6 0 0 0 120.5 120.5 17.26 17.26 0 1 1 0 34.51z"/></svg>
-      <span id="loading_text">Running {{nb_title}}...</span>
-    </h2>
+    </div>
+    <h2 id="loading_text">Running {{nb_title}}...</h2>
   </div>
 <script>
 var voila_process = function(cell_index, cell_count) {