/*======================================================== DARK LAYOUT =========================================================*/ @-webkit-keyframes ball-spin-fade-loader { 50% { -webkit-transform: scale(.4); transform: scale(.4); opacity: .3; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-moz-keyframes ball-spin-fade-loader { 50% { -moz-transform: scale(.4); transform: scale(.4); opacity: .3; } 100% { -moz-transform: scale(1); transform: scale(1); opacity: 1; } } @-o-keyframes ball-spin-fade-loader { 50% { -o-transform: scale(.4); transform: scale(.4); opacity: .3; } 100% { -o-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes ball-spin-fade-loader { 50% { -webkit-transform: scale(.4); -moz-transform: scale(.4); -o-transform: scale(.4); transform: scale(.4); opacity: .3; } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } } .ball-spin-fade-loader { position: relative; top: -10px; left: -10px; } .ball-spin-fade-loader > div:nth-child(1) { top: 25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s -.96s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.96s infinite linear; -o-animation: ball-spin-fade-loader 1s -.96s infinite linear; animation: ball-spin-fade-loader 1s -.96s infinite linear; } .ball-spin-fade-loader > div:nth-child(2) { top: 17.04545px; left: 17.04545px; -webkit-animation: ball-spin-fade-loader 1s -.84s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.84s infinite linear; -o-animation: ball-spin-fade-loader 1s -.84s infinite linear; animation: ball-spin-fade-loader 1s -.84s infinite linear; } .ball-spin-fade-loader > div:nth-child(3) { top: 0; left: 25px; -webkit-animation: ball-spin-fade-loader 1s -.72s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.72s infinite linear; -o-animation: ball-spin-fade-loader 1s -.72s infinite linear; animation: ball-spin-fade-loader 1s -.72s infinite linear; } .ball-spin-fade-loader > div:nth-child(4) { top: -17.04545px; left: 17.04545px; -webkit-animation: ball-spin-fade-loader 1s -.6s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.6s infinite linear; -o-animation: ball-spin-fade-loader 1s -.6s infinite linear; animation: ball-spin-fade-loader 1s -.6s infinite linear; } .ball-spin-fade-loader > div:nth-child(5) { top: -25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s -.48s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.48s infinite linear; -o-animation: ball-spin-fade-loader 1s -.48s infinite linear; animation: ball-spin-fade-loader 1s -.48s infinite linear; } .ball-spin-fade-loader > div:nth-child(6) { top: -17.04545px; left: -17.04545px; -webkit-animation: ball-spin-fade-loader 1s -.36s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.36s infinite linear; -o-animation: ball-spin-fade-loader 1s -.36s infinite linear; animation: ball-spin-fade-loader 1s -.36s infinite linear; } .ball-spin-fade-loader > div:nth-child(7) { top: 0; left: -25px; -webkit-animation: ball-spin-fade-loader 1s -.24s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.24s infinite linear; -o-animation: ball-spin-fade-loader 1s -.24s infinite linear; animation: ball-spin-fade-loader 1s -.24s infinite linear; } .ball-spin-fade-loader > div:nth-child(8) { top: 17.04545px; left: -17.04545px; -webkit-animation: ball-spin-fade-loader 1s -.12s infinite linear; -moz-animation: ball-spin-fade-loader 1s -.12s infinite linear; -o-animation: ball-spin-fade-loader 1s -.12s infinite linear; animation: ball-spin-fade-loader 1s -.12s infinite linear; } .ball-spin-fade-loader > div { position: absolute; width: 15px; height: 15px; margin: 2px; border-radius: 100%; background-color: #b8c2cc; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }