.loader { position: fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 130px; height: 170px; } .loader::before, .loader::after { content: ""; width: 0; height: 0; position: absolute; bottom: 30px; left: -50%; z-index: 1; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 100px solid #1b2a33; } .loader::after { border-right: 100px solid transparent; border-bottom: 100px solid #1f3039; } .loader .getting-there { width: 200%; text-align: center; position: absolute; bottom: 0; left: -50%; font-size: 20px; color: #fff; } .loader .binary { width: 100%; height: 140px; display: block; color: #000; position: absolute; top: -40px; left: 50px; z-index: 2; overflow: hidden; } .loader .binary::before, .loader .binary::after { font-family: "Lato"; font-size: 40px; position: absolute; top: 0; left: 0; opacity: 0; } .loader .binary:nth-child(1)::before { content: "0"; animation: a 1.1s linear infinite; } .loader .binary:nth-child(1)::after { content: "0"; animation: b 1.3s linear infinite; } .loader .binary:nth-child(2)::before { content: "1"; animation: c 0.9s linear infinite; } .loader .binary:nth-child(2)::after { content: "1"; animation: d 0.7s linear infinite; } .loader.JS_on::before, .loader.JS_on::after { transform: scale(1); } @keyframes a { 0% { transform: translate(30px, 0) rotate(30deg); opacity: 0; } 100% { transform: translate(30px, 150px) rotate(-50deg); opacity: 1; } } @keyframes b { 0% { transform: translate(50px, 0) rotate(-40deg); opacity: 0; } 100% { transform: translate(40px, 150px) rotate(80deg); opacity: 1; } } @keyframes c { 0% { transform: translate(70px, 0) rotate(10deg); opacity: 0; } 100% { transform: translate(60px, 150px) rotate(70deg); opacity: 1; } } @keyframes d { 0% { transform: translate(30px, 0) rotate(-50deg); opacity: 0; } 100% { transform: translate(45px, 150px) rotate(30deg); opacity: 1; } }