#app-loading { position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: flex; } /* Source of the following CSS: https://loading.io/css/ (modified) */ #app-loading .ring { display: inline-block; position: relative; width: 136px; height: 136px; margin: auto; } #app-loading .ring div { box-sizing: border-box; display: block; position: absolute; width: 120px; height: 120px; margin: 8px; border: 8px solid; border-radius: 50%; animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #f1dac8 transparent transparent transparent; } #app-loading .ring div:nth-child(1) { animation-delay: -0.45s; } #app-loading .ring div:nth-child(2) { animation-delay: -0.3s; } #app-loading .ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes loading-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }