Better page preloading

Svetlana Linuxenko · Svetlana Linuxenko · commit 0aefa117655c · 2017-12-31T13:42:23.000+02:00
diff --git a/css/home.css b/css/home.css
@@ -1,3 +1,16 @@
+.page-loading > * {
+  display: none;
+}
+
+body > .progress {
+  display: none;
+}
+
+.page-loading > .progress {
+  display: block;
+  margin: 0;
+}
+
 div.header > nav {
   background: #262A36;
   box-shadow: inset 0 -10px 10px 0 rgba(0,0,0,0.05);
@@ -635,3 +648,8 @@ li.li-logo > a.brand-logo {
   font-size: 4rem;
   height: 5rem;
 }
+
+
+img {
+  width: auto;
+}
diff --git a/index.html b/index.html
@@ -20,10 +20,18 @@
   <meta name="theme-color" content="#262A36">
   <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
   <link rel="stylesheet" media="screen,projection" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" >
+  <style>
+    img {
+      width: 0px;
+    }
+  </style>
   <link rel="stylesheet" media="screen,projection" href="/css/home.css" >
   <title>Svetlana Linuxenko</title>
 </head>
-<body>
+<body class="page-loading">
+<div class="progress grey">
+  <div class="indeterminate blue"></div>
+</div>
 <div class="header">
 <nav role="navigation">
   <div class="nav-wrapper container grey-text text-lighten-5">
@@ -179,6 +187,7 @@ <h5 class="white-text">Links</h5>
         onOpen: function(el) { el.addClass('side-opened'); },
         onClose: function(el) { el.removeClass('side-opened'); }
       });
+      $('body').removeClass('page-loading');
     });
   </script>
 </body>
