body { background: black; background-size: cover; } .content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .container { display: flex; flex-wrap: wrap; justify-content: space-around; } .canvas { align-items: center; background: radial-gradient(ellipse at center, pink 0%,black 70%,black 100%); border-radius: 30%; box-shadow: 0 5px 20px rgba(0,0,0,0.2); display: flex; height: 2em; justify-content: center; width: 2em; } .spinner3 { animation: spinnerThree 1s linear infinite; background: black; border-radius: 100%; position:relative; left:.8em; width: .4em; height: .31em; } @keyframes spinnerThree { 0%, 35% { background: black; transform: scale(.1); } 20%, 50% { background: black; transform: scale(3.1); } 60%{ background: blue; opacity:1; transform: scale(10); } 70%{ background: white; opacity:.3; transform: scale(15); } 80%{ background: gray; opacity:.2; transform: scale(20); } 90%{ background: gray; opacity:.15; transform: scale(25); } 95%{ background: gray; opacity:.08; transform: scale(30); } 100%{ background: gray; opacity:.05; transform: scale(40); } } .spinner4 { animation: spinnerFour .5s linear infinite; border: solid 1px transparent; border-top: solid 1px gray; border-radius: 100%; width: 2em; height: 2em; position:relative; } @keyframes spinnerFour { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 600px) { .container { align-items: center; flex-direction: column; }.canvas { margin: 1em; } }