body { background-color: #333; } .loading { position: relative; display: inline-block; } .loading::before{ content: ""; position: absolute; width: 100px; height: 100px; background-color: #1c5ba2; border-radius: 100%; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-animation: slide-top 0.5s ease-out infinite alternate ; animation: slide-top 0.5s ease-out infinite alternate ; } #c { position: relative; background-color: black; } /* ---------------------------------------------- * Generated by Animista on 2019-9-17 14:35:13 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation slide-top * ---------------------------------------- */ @-webkit-keyframes slide-top { 0% { -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } 100% { -webkit-transform: translate(-50%, -150%); transform: translate(-50%, -150%); } } @keyframes slide-top { 0% { -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } 100% { -webkit-transform: translate(-50%, -150%); transform: translate(-50%, -150%); } }