Optional CDN assets

1 files changed, 56 insertions, 3 deletions

diff --git a/layouts/partials/comment-utterances.html b/layouts/partials/comment-utterances.html
index f515a72..9411ee5 100644
--- a/layouts/partials/comment-utterances.html
+++ b/layouts/partials/comment-utterances.html
@@ -1,10 +1,63 @@
 <div id="post-loading">
-    <div id="container-loading-bar">
-        <div id="loading-bar"></div>
+    <div class="loadingio-spinner-rolling-cfxk9ra3y9n">
+        <div class="loading-rolling">
+            <div></div>
+        </div>
     </div>
+    <style type="text/css">
+        @keyframes loading-rolling {
+            0% {
+                transform: translate(-50%, -50%) rotate(0deg);
+            }
+
+            100% {
+                transform: translate(-50%, -50%) rotate(360deg);
+            }
+        }
+
+        .loading-rolling div {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            border: 10px solid #8aa2d3;
+            border-top-color: transparent;
+            border-radius: 50%;
+        }
+
+        .loading-rolling div {
+            animation: loading-rolling 1s linear infinite;
+            top: 50px;
+            left: 50px
+        }
+
+        .loadingio-spinner-rolling-cfxk9ra3y9n {
+            width: 100px;
+            height: 100px;
+            display: inline-block;
+            overflow: hidden;
+            background: none;
+        }
+
+        .loading-rolling {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            transform: translateZ(0) scale(1);
+            backface-visibility: hidden;
+            transform-origin: 0 0;
+            /* see note above */
+        }
+
+        .loading-rolling div {
+            box-sizing: content-box;
+        }
+
+        /* generated by https://loading.io/ */
+    </style>
     <p>{{ i18n "postCommentLoading" }}</p>
 </div>
 <div id="post-comment">
-    <script src="{{ .Site.Params.cdnUtterancesJS }}" repo="{{ .Site.Params.utterancesRepo }}" issue-term="{{ .Site.Params.utterancesIssueTerm }}" theme="{{ .Site.Params.utterancesTheme }}"
+    <script src="{{ .Site.Params.cdnUtterancesJS }}" repo="{{ .Site.Params.utterancesRepo }}"
+            issue-term="{{ .Site.Params.utterancesIssueTerm }}" theme="{{ .Site.Params.utterancesTheme }}"
             crossorigin="anonymous" async></script>
 </div>
\ No newline at end of file