.loader-overlay { direction: ltr; background: rgba(255, 255, 255, 0.3); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; visibility: hidden; opacity: 0; transition: 0.4s ease; &.is-first-launch { // if loader is shown for the first time, we will // remove opacity and hide the entire site contents background: #f2efeb; } &.is-active { opacity: 1; visibility: visible; } } .loader { position: absolute; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px; width: 153px; height: 153px; &__cube { position: absolute; margin: -1px; padding: 0; width: 50px; height: 50px; background: rgba(35, 35, 35, 0.6); display: inline-block; animation-iteration-count: infinite; animation-duration: 0.5s; animation-timing-function: linear; &--1 { margin: 0 0 0 0; animation-name: cube1; } &--2 { margin: 0 0 0 051px; animation-name: cube2; } &--3 { margin: 0 0 0 102px; animation-name: cube3; } &--4 { margin: 51px 0 0 0; animation-name: cube4; } &--5 { margin: 051px 0 0 051px; } &--6 { margin: 51px 0 0 102px; animation-name: cube6; } &--7 { margin: 102px 0 0 0; animation-name: cube7; } &--8 { margin: 102px 0 0 051px; animation-name: cube8; } } } @keyframes cube1 { 25% { margin: 0 0 0 0; } 50% { margin: 0 0 0 51px; } 75% { margin: 0 0 0 51px; } 100% { margin: 0 0 0 51px; } } @keyframes cube2 { 25% { margin: 0 0 0 51px; } 50% { margin: 0 0 0 102px; } 75% { margin: 0 0 0 102px; } 100% { margin: 0 0 0 102px; } } @keyframes cube3 { 25% { margin: 51px 0 0 102px; } 50% { margin: 51px 0 0 102px; } 75% { margin: 51px 0 0 102px; } 100% { margin: 51px 0 0 102px; } } @keyframes cube4 { 25% { margin: 51px 0 0 0; } 50% { margin: 51px 0 0 0; } 75% { margin: 0 0 0 0; } 100% { margin: 0 0 0 0; } } @keyframes cube6 { 25% { margin: 102px 0 0 102px; } 50% { margin: 102px 0 0 102px; } 75% { margin: 102px 0 0 102px; } 100% { margin: 102px 0 0 51px; } } @keyframes cube7 { 25% { margin: 102px 0 0 0; } 50% { margin: 102px 0 0 0; } 75% { margin: 51px 0 0 0; } 100% { margin: 51px 0 0 0; } } @keyframes cube8 { 25% { margin: 102px 0 0 51px; } 50% { margin: 102px 0 0 51px; } 75% { margin: 102px 0 0 51px; } 100% { margin: 102px 0 0 0; } }