@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Open+Sans:wght@400;700&display=swap'); * { box-sizing: border-box; margin: 0; } body { font-family: 'Open Sans', 'Lato', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; } .spinner-wrapper { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; background-color: rgb(255, 255, 255); z-index: 99; } .spinner { position: absolute; left: 50%; top: 50%; height: 60px; width: 60px; margin: 0px auto; -webkit-animation: rotation 0.6s infinite linear; -moz-animation: rotation 0.6s infinite linear; -o-animation: rotation 0.6s infinite linear; animation: rotation 0.6s infinite linear; border-left: 6px solid rgba(0, 174, 239, 0.15); border-right: 6px solid rgba(0, 174, 239, 0.15); border-bottom: 6px solid rgba(0, 174, 239, 0.15); border-top: 6px solid rgba(0, 174, 239, 0.8); border-radius: 100%; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }