.spinner { width: 36px; height: 0; padding-bottom: 36px; border-radius: 50%; position: relative; transform: translate(0%, -50%) rotate(0deg); will-change: transform; animation: spin 1600ms linear normal infinite; background-color: transparent; clip: rect(0, 18px, 36px, 0); } .spinner::before, .spinner::after { content: ' '; height: 100%; width: 100%; border: 4px solid #fff; border-radius: 50%; clip: rect(0, 18px, 36px, 0); left: 0; position: absolute; top: 0; box-sizing: border-box; animation: shape-shift-before 1600ms linear normal infinite; } .spinner::after { animation: shape-shift-after 1600ms linear normal infinite; } @-moz-keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @-webkit-keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @-o-keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @-moz-keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-o-keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-moz-keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-o-keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } html, body { padding: 0; margin: 0; overflow: hidden; width: 100%; height: 100%; font-family: Arial, Helvetica, 'Lucida Grande', 'DejaVu Sans', Verdana, sans-serif; font-size: 16px; color: white; } canvas { border: 0px none; background-color: #00acec; height: 100%; width: 100%; } canvas { outline: 0px solid transparent; cursor: default } #logo-white, #logo-black { display: none; } #splash { z-index: 250; height: 100%; width: 100%; top: 0px; bottom: 0px; position: absolute; display: table; } #brand { display: table; right: 0px; bottom: 0px; position: absolute; width: 100px; height: 28px; margin: 18px; z-index: 251; background-position: top left; background-size: 100px 28px; background-repeat: no-repeat; } :root { --APPStyle: ABB; } @media (prefers-color-scheme: dark) { canvas { background-color: #0f0f0f; } #splash { background-color: #0f0f0f; } .spinner::before, .spinner::after { border: 2px solid #fff; } #launch { display: none; } #launch-dark { display: block; } } #splash { background-color: #ffffff; } .spinner::before, .spinner::after { border: 2px solid #000; } #qrcode-as { background-image: url(../qrcodes/abb-apple-qrcode.png) } #qrcode-ps { background-image: url(../qrcodes/abb-playstore-qrcode.png) } .link-abb { display: block; } .link-bje { display: none; } .launch { background-repeat: no-repeat; background-position-x: center; background-size: contain; position: relative; } #launch { display: block; background-image: url(../splash-abb.svg); } #launch-dark { display: none; background-image: url(../splash-abb-dark.svg); } .spinner-container { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); } #modal-wrapper .modal-content .primaryBtn { background: #000; } #modal-wrapper .modal-content .secondaryBtn { border: 2px solid #000000; }