.demo{ background-color: #ea2a3d; } .preloader{ display: flex; justify-content: center; align-items: center; margin-top: 25px; } .loader{ background-color: #c0b283; width: 12em; height: 12em; margin: 0 auto; border-radius: 50%; box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4); position: relative; animation: bottom-ripple 1s ease-in-out infinite -50ms; } .loader::before, .loader::after { content: ""; border-radius: inherit; box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4); position: absolute; left: 50%; top: 50%; } .loader::before{ background-color: #dcd0c0; height: 8em; width: 8em; margin: -4em 0 0 -4em; animation: middle-ripple 1s ease-in-out infinite -25ms; } .loader::after{ background-color: #f4f4f4; height: 4em; width: 4em; margin: -2em 0 0 -2em; animation: top-ripple 1s ease-in-out infinite; } @keyframes bottom-ripple{ 0%{ box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4); transform: scale(1); } 50%{ box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4); transform: scale(1.25); } } @keyframes middle-ripple{ 0%{ box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4); transform: scale(1); } 50%{ box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4); transform: scale(1.1); } } @keyframes top-ripple{ 0%{ box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4); transform: scale(1); } 50%{ box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4); transform: scale(1.4); } }