CSS Spinner Loader by Nitin Kumar Output View Horizontal Vertical HTML CSS JS Tidy <span class="loader"></span> 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 Spinner Resource Add External Stylesheets and Script
