.loader { position: relative; width: 12.5em; height: 12.5em; transform: rotate(165deg); } .loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 2.5em; height: 2.5em; border-radius: 1.25em; transform: translate(-50%, -50%); } .loader:before { animation: before 2s infinite; } .loader:after { animation: after 2s infinite; } @keyframes before { 0% { width: 2.5em; box-shadow: 5em -2.5em rgba(88, 163, 243, 0.75), -5em 2.5em rgba(153, 202, 255, 0.75); } 35% { width: 12.5em; box-shadow: 0 -2.5em rgba(88, 163, 243, 0.75), 0 2.5em rgba(153, 202, 255, 0.75); } 70% { width: 2.5em; box-shadow: -5em -2.5em rgba(88, 163, 243, 0.75), 5em 2.5em rgba(153, 202, 255, 0.75); } 100% { box-shadow: 5em -2.5em rgba(88, 163, 243, 0.75), -5em 2.5em rgba(153, 202, 255, 0.75); } } @keyframes after { 0% { height: 2.5em; box-shadow: 2.5em 5em rgba(224, 224, 224, 0.75), -2.5em -5em rgba(198, 200, 210, 0.75); } 35% { height: 12.5em; box-shadow: 2.5em 0 rgba(224, 224, 224, 0.75), -2.5em 0 rgba(198, 200, 210, 0.75); } 70% { height: 2.5em; box-shadow: 2.5em -5em rgba(224, 224, 224, 0.75), -2.5em 5em rgba(198, 200, 210, 0.75); } 100% { box-shadow: 2.5em 5em rgba(224, 224, 224, 0.75), -2.5em -5em rgba(198, 200, 210, 0.75); } } /** * Attempt to center the whole thing! */ html, body { height: 100%; } .loader { position: absolute; top: calc(50% - 6.25em); left: calc(50% - 6.25em); }