chart loader in effect

themes/grav/scss/preset.scss

@@ -404,23 +404,6 @@ tr {
 }
 
 #admin-dashboard {
-    .secondary-accent {
-        @include linear-gradient(shade($secondary-accent-bg, 20%), tint($secondary-accent-bg, 30%));
-
-        p {
-            color: rgba($secondary-accent-fg, 0.95);
-        }
-        .stat {
-            i {
-                color: rgba($secondary-accent-fg, 0.75);
-            }
-        }
-        .numeric {
-            em {
-                color: rgba($secondary-accent-fg, .85);
-            }
-        }
-    }
 
     .primary-accent {
         @include linear-gradient(shade($primary-accent-bg, 20%), tint($primary-accent-bg, 30%));
@@ -438,7 +421,35 @@ tr {
                 color: rgba($primary-accent-fg, .85);
             }
         }
+
+        .chart-loader {
+            color: shade($primary-accent-bg, 20%);
+        }
     }
+
+    .secondary-accent {
+        @include linear-gradient(shade($secondary-accent-bg, 20%), tint($secondary-accent-bg, 30%));
+
+        p {
+            color: rgba($secondary-accent-fg, 0.95);
+        }
+        .stat {
+            i {
+                color: rgba($secondary-accent-fg, 0.75);
+            }
+        }
+        .numeric {
+            em {
+                color: rgba($secondary-accent-fg, .85);
+            }
+        }
+
+        .chart-loader {
+            color: shade($secondary-accent-bg, 20%);
+        }
+    }
+
+
 }
 
 // Forms

themes/grav/scss/template/_admin.scss

@@ -474,6 +474,22 @@ $update-height: 3rem;
 
     }
 
+    .chart-loader {
+        position: relative;
+
+        .fa {
+            display: block;
+            position: absolute;
+            width: 100%;
+            text-align: center;
+            font-size: 4rem;
+            margin-top: -2rem;
+            @extend %vertical-align;
+        }
+
+        text-align: center;
+    }
+
     #updates {
 
         p {
@@ -497,6 +513,10 @@ $update-height: 3rem;
             float: left;
         }
 
+        .ct-chart {
+            min-height: 157px;
+        }
+
 
         .numeric {
             display: block;
@@ -532,10 +552,20 @@ $update-height: 3rem;
     }
 
     #popularity {
+
+        .admin-statistics-chart {
+            position: relative;
+        }
+
+        .ct-chart {
+            min-height: 171px;
+        }
+
         p {
             text-align: center;
             margin: 0;
         }
+
         .button-bar {
             height: 100px;
             padding: 0 1rem;

themes/grav/templates/partials/dashboard-maintenance.html.twig

@@ -7,14 +7,14 @@
             <div class="admin-update-charts">
                 <div class="updates-chart" data-chart-name="updates" data-chart-type="pie" data-chart-data="{{ {'series': [100, 0]}|json_encode|e('html_attr') }}">
                     <div class="chart-wrapper">
-                        <div class="ct-chart"></div>
+                        <div class="ct-chart chart-loader"><i class="fa fa-refresh fa-spin"></i></div>
                         <span class="numeric hidden"><span>-</span><em>{{ "PLUGIN_ADMIN.UPDATED"|tu|lower }}</em></span>
                     </div>
                     <p class="js__updates-available-description">&nbsp;</p>
                 </div>
                 <div class="backups-chart" data-chart-name="backups" data-chart-type="pie" data-chart-data="{{ {'series': [backup.chart_fill, backup.chart_empty]}|json_encode|e('html_attr') }}">
                     <div class="chart-wrapper">
-                        <div class="ct-chart"></div>
+                        <div class="ct-chart chart-loader"><i class="fa fa-refresh fa-spin"></i></div>
                         <span class="numeric hidden">{{ backup.days }}<em>{{ "PLUGIN_ADMIN.DAYS"|tu|lower }}</em></span>
                     </div>
                     <p class="hidden">{{ "PLUGIN_ADMIN.LAST_BACKUP"|tu }}</p>

themes/grav/templates/partials/dashboard-statistics.html.twig

@@ -2,20 +2,22 @@
     <div id="popularity" class="dashboard-item dashboard-right" data-chart-name="popularity" data-chart-type="bar" data-chart-data="{{ {'series': [popularity.getDailyChartData['data']], 'labels': popularity.getDailyChartData['labels']}|json_encode|e('html_attr') }}">
         <div class="primary-accent">
             <h1>{{ "PLUGIN_ADMIN.STATISTICS"|tu }}</h1>
-            <div class="ct-chart"></div>
-            <div class="flush-bottom button-bar stats-bar">
-                <span class="stat">
-                    <b>{{ popularity.getDailyTotal }}</b>
-                    <i>{{ "PLUGIN_ADMIN.TODAY"|tu }}</i>
-                </span>
-                <span class="stat">
-                    <b>{{ popularity.getWeeklyTotal }}</b>
-                    <i>{{ "PLUGIN_ADMIN.WEEK"|tu }}</i>
-                </span>
-                <span class="stat">
-                    <b>{{ popularity.getMonthlyTotal }}</b>
-                    <i>{{ "PLUGIN_ADMIN.MONTH"|tu }}</i>
-                </span>
+            <div class="admin-statistics-chart">
+                <div class="ct-chart chart-loader"><i class="fa fa-refresh fa-spin"></i></div>
+                <div class="flush-bottom button-bar stats-bar">
+                    <span class="stat">
+                        <b>{{ popularity.getDailyTotal }}</b>
+                        <i>{{ "PLUGIN_ADMIN.TODAY"|tu }}</i>
+                    </span>
+                    <span class="stat">
+                        <b>{{ popularity.getWeeklyTotal }}</b>
+                        <i>{{ "PLUGIN_ADMIN.WEEK"|tu }}</i>
+                    </span>
+                    <span class="stat">
+                        <b>{{ popularity.getMonthlyTotal }}</b>
+                        <i>{{ "PLUGIN_ADMIN.MONTH"|tu }}</i>
+                    </span>
+                </div>
             </div>
         </div>
     </div>