CSS Spinner Loader by Nitin Kumar Output View Horizontal Vertical HTML CSS JS Tidy HTML CSS JS Tidy body { display: flex; height: 100vh; align-items: center; justify-content: center; } /* Loader style */ .loader { width: 64px; height: 64px; display: block; margin: 15px auto; position: relative; color: #ccc; box-sizing: border-box; animation: rotation 1s linear infinite; } .loader::after, .loader::before { content: ''; box-sizing: border-box; position: absolute; width: 48px; height: 48px; top: 50%; left: 50%; transform: scale(0.5) translate(0, 0); background-color: #ccc; border-radius: 50%; animation: animloader 1s infinite ease-in-out; } .loader::before { background-color: orange; transform: scale(0.3) translate(-48px, -48px); } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animloader { 50% { transform: scale(.7) translate(-50%, -50%); } } /* END Loader style */ HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description CSS Spinner Loader component in pure CSS, without any external library. Catagory CSS Tags CSS Spinner Resource Add External Stylesheets and Script