Theming With WP REST API - Part 17 - Loading Screens

ivandoric · Jul 1, 2016 · c39b892 · c39b892
1 parent 04b386c
commit c39b892
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 4 deletions.
diff --git a/index.php b/index.php
@@ -13,6 +13,10 @@
 
     <div class="overlay" v-if="show" transition="overlayshow"></div>
 
+    <div class="loading-overlay" v-if="loading">
+        <div class="loading">Loading...</div>
+    </div>
+
     <header class="main-header">
         <img class="hero" src="<?php bloginfo('template_url'); ?>/images/hero.jpg" alt="">    
     </header>

diff --git a/js/app.js b/js/app.js
@@ -16,7 +16,8 @@ var postList = Vue.extend({
             allPages: '',
             prev_page: '',
             next_page: '',
-            currentPage: ''
+            currentPage: '',
+            loading: ''
         }
     },
 
@@ -37,9 +38,13 @@ var postList = Vue.extend({
 
             this.currentPage = pageNumber;
 
+            this.$set('loading', true);
+
             this.$http.get(posts).then(function(response){
                 this.$set('posts', response.data);
                 this.makePagination(response);
+
+                this.$set('loading', false);
             });
         },
 

diff --git a/sass/_homepage.scss b/sass/_homepage.scss
@@ -263,7 +263,7 @@
 |--------------------------------------------------------------------------
 */
 
-.overlay{
+.overlay, .loading-overlay{
     position: fixed;
     top:0;
     left:0;
@@ -272,6 +272,23 @@
     background: rgba(black, .5);
 }
 
+
+
+.loading{
+    width:300px;
+    background: #000;
+    text-transform: uppercase;
+    position: fixed;
+    font-weight: 700;
+    color:#fff;
+    top:50%;
+    left:50%;
+    text-align: center;
+    margin-left: -150px;
+    margin-top: -10px;
+    padding:20px;
+}
+
 /*
 |--------------------------------------------------------------------------
 | Pagination

diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map