diff --git a/theme/default/home.hbs b/theme/default/home.hbs
index c9a5345..ea5991a 100644
--- a/theme/default/home.hbs
+++ b/theme/default/home.hbs
@@ -5,6 +5,7 @@
         <link rel="stylesheet" href="/static/style.css?ver={{ build_num 0 }}"/>
     </head>
     <body>
+        {{> loading.hbs }}
         <div class="page-wrapper">
             {{> sidebar.hbs }}
             <div class="post-list">
diff --git a/theme/default/inline_style.hbs b/theme/default/inline_style.hbs
new file mode 100644
index 0000000..0bee06b
--- /dev/null
+++ b/theme/default/inline_style.hbs
@@ -0,0 +1,124 @@
+<style>
+    /* Do not show content until the main CSS is loaded (which overrides opacity) */
+    .page-wrapper {
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+    }
+
+    .loading-progress {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100vw;
+        height: 2px;
+    }
+
+    /* https://codepen.io/holdencreative/pen/vEVbwv */
+    .progress {
+        position: relative;
+        height: 2px;
+        display: block;
+        width: 100%;
+        background-clip: padding-box;
+        margin: 0;
+        overflow: hidden;
+    }
+
+    .progress .indeterminate {
+        background-color: #E91E63;
+    }
+
+    .progress .indeterminate:before {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    .progress .indeterminate:after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        -webkit-animation-delay: 1.15s;
+        animation-delay: 1.15s;
+    }
+
+    @-webkit-keyframes indeterminate {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    @keyframes indeterminate {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    @-webkit-keyframes indeterminate-short {
+        0% {
+            left: -200%;
+            right: 100%;
+        }
+
+        60% {
+            left: 107%;
+            right: -8%;
+        }
+
+        100% {
+            left: 107%;
+            right: -8%;
+        }
+    }
+
+    @keyframes indeterminate-short {
+        0% {
+            left: -200%;
+            right: 100%;
+        }
+
+        60% {
+            left: 107%;
+            right: -8%;
+        }
+
+        100% {
+            left: 107%;
+            right: -8%;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/theme/default/loading.hbs b/theme/default/loading.hbs
new file mode 100644
index 0000000..a2d3c2b
--- /dev/null
+++ b/theme/default/loading.hbs
@@ -0,0 +1,6 @@
+{{> inline_style.hbs }}
+<div class="loading-progress">
+    <div class="progress">
+        <div class="indeterminate"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/theme/default/post.hbs b/theme/default/post.hbs
index be88670..101a38b 100644
--- a/theme/default/post.hbs
+++ b/theme/default/post.hbs
@@ -5,6 +5,7 @@
         <link rel="stylesheet" href="/static/style.css?ver={{ build_num 0 }}"/>
     </head>
     <body>
+        {{> loading.hbs }}
         <div class="page-wrapper">
             {{> sidebar.hbs }}
             <article class="content">
diff --git a/theme/default/static/style.css b/theme/default/static/style.css
index 84c33b3..ddf5b9e 100644
--- a/theme/default/static/style.css
+++ b/theme/default/static/style.css
@@ -16,6 +16,14 @@ html {
     background-attachment: fixed;
 }
 
+.page-wrapper {
+    opacity: 1 !important;
+}
+
+.loading-progress {
+    display: none !important;
+}
+
 .hidden {
     display: none;
 }
