💫 Add loader animation

master
KaKi87 2 years ago
parent 68ba388627
commit 020ae6210b
  1. 28
      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">

Loading…
Cancel
Save