diff --git a/css/main.css b/css/main.css
index 5d5c3a8..0db19e3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -259,6 +259,26 @@ i.rules-icon:hover {
     background-color: rgba(230,230,230, 0.3);
 }
 
+#load_screen {
+    background: rgba(40,40,40,1);
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    height: 1600px;
+    z-index: 10;
+    opacity: 1;
+}
+#load_screen > #loading {
+    color: #fff;
+    width: 50%;
+    height: 240px;
+    margin: 300px auto;
+    text-align: center;
+    font-size: 1.5em;
+}
+.progress {
+    background: rgb(250,250,250);
+}
 @media only screen and (max-width: 768px) {
 .cover-2 p,
 .cover-2 h2 {
diff --git a/index.html b/index.html
index f26dec7..7c13912 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,8 @@
 </head>
 
 <body>
+    <div id="load_screen"><div id="loading">Loading TotalFreedom - Free OP!<div class="progress"><div class="indeterminate"></div></div>
+        </div></div>
     <div class="navbar-fixed">
         <nav class="transparent z-depth-0" id="menu">
             <div class="nav-wrapper z-depth-0">
diff --git a/js/main.js b/js/main.js
index 248030f..3929969 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,3 +1,8 @@
+window.addEventListener("load", function()  {
+    var load_screen = document.getElementById("load_screen");
+    document.body.removeChild(load_screen);
+});
+
 $(document).ready(function() {
     $(".button-collapse").sideNav({
         closeOnClick: true
