💫 Add loader animation

index.html

@@ -84,6 +84,31 @@
                 background-color: var(--color-medium);
                 padding: 0 12.5vw;
             }
+            @keyframes loader {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+            .app__main__loader {
+                margin: 0 auto;
+                display: flex;
+                width: 80px;
+                height: 80px;
+                align-items: center;
+                justify-content: center;
+            }
+            .app__main__loader--hidden {
+                display: none;
+            }
+            .app__main__loader:after {
+                content: ' ';
+                display: block;
+                width: var(--size-big);
+                height: var(--size-big);
+                border-radius: 50%;
+                border: 6px solid #fff;
+                border-color: #fff transparent #fff transparent;
+                animation: loader 1.2s linear infinite;
+            }
             .app__main__gitmojis {
                 display: grid;
                 grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
@@ -295,6 +320,8 @@
                             .sort((a, b) => dice(value, b.textContent) - dice(value, a.textContent))
                             .forEach((el, index) => el.style.order = (index + 1).toString());
                 };
+
+                document.querySelector('.app__main__loader').classList.add('app__main__loader--hidden');
             });
         </script>
     </head>
@@ -320,6 +347,7 @@
             </label>
         </header>
         <main class="app__main">
+            <div class="app__main__loader"></div>
             <ul class="app__main__gitmojis"></ul>
         </main>
         <footer class="app__footer">