October 2018
Beginner to intermediate
478 pages
10h 8m
English
Let's complete our page by adding a simple busy indicator spinner:
<div id="productsContainer" class="clear-fix"></div><div class="clear-fix"></div><div id="wait" class="loader-container hidden"> <div class="loader"></div></div>
.loader-container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: azure; opacity: 0.5; display: flex; align-items: center; justify-content: center;}.loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear infinite;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
Read now
Unlock full access