.demo{ background: #1B9CFC; } .loader{ width: 16em; height: 8em; margin: 50px auto 0; position: relative; overflow: hidden; } .loader:before, .loader:after{ content: ''; position: absolute; bottom: 0; } .loader:before{ background-color: hsla(0, 0%, 85%); width: inherit; height: 0.2em; } .loader:after{ width: 50%; height: inherit; border: 0.2em solid hsla(0, 0%, 85%); border-radius: 50%; left: 25%; } .loader span{ background-color: #fff; width: 5%; height: 10%; border-radius: 50%; transform-origin: 50% -3em; position: absolute; left: -5%; bottom: 0.2em; animation: 2s linear infinite; animation-name: run, rotating; } .loader span:nth-child(2){ animation-delay: 0.075s; } .loader span:nth-child(3){ animation-delay: 0.15s; } @keyframes run{ 0%{ left: -5%; } 10%, 60%{ left: calc((100% - 5%) / 2); } 70%, 100%{ left: 100%; } } @keyframes rotating{ 0%, 10%{ transform: rotate(0deg); } 60%, 100%{ transform: rotate(-1turn); } }