.wrap-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: #060a13; } .dank-ass-loader { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .dank-ass-loader .row { display: -webkit-box; display: flex; } .arrow { width: 0; height: 0; margin: 0 -6px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 21.6px solid #fd7000; -webkit-animation: blink 1s infinite; animation: blink 1s infinite; -webkit-filter: drop-shadow(0 0 18px #fd7000); filter: drop-shadow(0 0 18px #fd7000); } .arrow.down { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .arrow.outer-1 { -webkit-animation-delay: -0.0555555556s; animation-delay: -0.0555555556s; } .arrow.outer-2 { -webkit-animation-delay: -0.1111111111s; animation-delay: -0.1111111111s; } .arrow.outer-3 { -webkit-animation-delay: -0.1666666667s; animation-delay: -0.1666666667s; } .arrow.outer-4 { -webkit-animation-delay: -0.2222222222s; animation-delay: -0.2222222222s; } .arrow.outer-5 { -webkit-animation-delay: -0.2777777778s; animation-delay: -0.2777777778s; } .arrow.outer-6 { -webkit-animation-delay: -0.3333333333s; animation-delay: -0.3333333333s; } .arrow.outer-7 { -webkit-animation-delay: -0.3888888889s; animation-delay: -0.3888888889s; } .arrow.outer-8 { -webkit-animation-delay: -0.4444444444s; animation-delay: -0.4444444444s; } .arrow.outer-9 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .arrow.outer-10 { -webkit-animation-delay: -0.5555555556s; animation-delay: -0.5555555556s; } .arrow.outer-11 { -webkit-animation-delay: -0.6111111111s; animation-delay: -0.6111111111s; } .arrow.outer-12 { -webkit-animation-delay: -0.6666666667s; animation-delay: -0.6666666667s; } .arrow.outer-13 { -webkit-animation-delay: -0.7222222222s; animation-delay: -0.7222222222s; } .arrow.outer-14 { -webkit-animation-delay: -0.7777777778s; animation-delay: -0.7777777778s; } .arrow.outer-15 { -webkit-animation-delay: -0.8333333333s; animation-delay: -0.8333333333s; } .arrow.outer-16 { -webkit-animation-delay: -0.8888888889s; animation-delay: -0.8888888889s; } .arrow.outer-17 { -webkit-animation-delay: -0.9444444444s; animation-delay: -0.9444444444s; } .arrow.outer-18 { -webkit-animation-delay: -1s; animation-delay: -1s; } .arrow.inner-1 { -webkit-animation-delay: -0.1666666667s; animation-delay: -0.1666666667s; } .arrow.inner-2 { -webkit-animation-delay: -0.3333333333s; animation-delay: -0.3333333333s; } .arrow.inner-3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .arrow.inner-4 { -webkit-animation-delay: -0.6666666667s; animation-delay: -0.6666666667s; } .arrow.inner-5 { -webkit-animation-delay: -0.8333333333s; animation-delay: -0.8333333333s; } .arrow.inner-6 { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes blink { 0% { opacity: 0.1; } 30% { opacity: 1; } 100% { opacity: 0.1; } } @keyframes blink { 0% { opacity: 0.1; } 30% { opacity: 1; } 100% { opacity: 0.1; } }