[IMP] better spinner

3 years ago · 56edc0174b
parent 268e27cd51
commit 56edc0174b
2 changed files with 18 additions and 4 deletions
--- a/static/css/style.css
+++ b/static/css/style.css
@ -93,4 +93,18 @@ a {

 .logo {
    width: 100%;
+}
+
+.icn-spinner {
+  animation: spin-animation 0.9s infinite;
+  display: inline-block;
+}
+
+@keyframes spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
 }
--- a/templates/base.html
+++ b/templates/base.html
@ -18,8 +18,8 @@
 </head>
 <body>
 <div id="loader-wrapper" class="bg-white position-fixed z-3 w-100 h-100 text-center">
-    <div class="spinner-border mt-5" role="status" style="position: fixed; top: 50%;">
-        <span class="visually-hidden">Loading...</span>
+    <div class="" role="status" style="position: fixed; top: 50%;">
+        <i class="la la-4x la-compact-disc icn-spinner centered"></i>
    </div>
 </div>

@ -34,7 +34,7 @@
                            <div class="logo-home mx-auto">
                                <a id="logo" class="text-black btn-modal" href="#" data-action="main_menu">
                                    <h1 class="logo-text" style="margin-left: 6px;">
-                                        <i class="la la-dot-circle"></i>Discography
+                                        <i class="la la-compact-disc"></i>Discography
                                    </h1>
                                </a>
                            </div>
@ -93,7 +93,7 @@
                            crossorigin="anonymous"></script>
                    <script type="text/javascript">
                        $(window).on('load', function () {
-                            $("#loader-wrapper").fadeOut(700);
+                            $("#loader-wrapper").fadeOut(900);
                        });
                    </script>
                    <script src="/static/js/app.js"></script>