Content is loading…
Generate pure-CSS loading spinners and copy the HTML + CSS.
<div class="loader"></div>
<style>
.loader {
width: 48px;
height: 48px;
border: 6px solid #6366f133;
border-top-color: #6366f1;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
</style>Create pure-CSS loading spinners and animations with no images or JavaScript. Choose from spinner, dual-ring, dots, bars and pulse styles, tweak size, color and speed, and copy the ready-to-paste HTML + CSS. Perfect for lightweight loading indicators. Runs entirely in your browser.
This tool lets you quickly generate pure-CSS loading spinners and animations without relying on images or JavaScript. You can visually customize styles like dual-ring, dots, bars, and pulse, then instantly copy the ready-to-paste HTML and CSS. Because it runs entirely in your browser, it is fast, lightweight, and requires no software installation.
Good to know: Projects requiring complex, multi-step orchestration animations or SVG-based loading graphics may need a more advanced animation workflow.
Create and customize lightweight pure-CSS loading animations for your website without using images or JavaScript.
Select a loader animation style
Choose your preferred animation type from options like spinner, dual-ring, dots, bars, or pulse styles.
Customize the loader appearance
Adjust the size and colors of the spinner to match your website's design and branding requirements.
Configure the animation speed
Tweak the rotation or pulse speed using the generator settings to achieve the desired visual effect.
Copy the generated HTML code
Copy the lightweight HTML snippet provided by the tool and paste it into your project's markup.
Copy and apply the CSS styles
Copy the generated CSS code and add it to your stylesheet to render the pure-CSS loading animation.
Estimated time: PT1M
Share this tool
Visually build CSS gradients and copy the CSS output.
Visually create CSS box shadows with live preview and one-click copy.
Build flexbox layouts visually and copy the CSS.
Remove whitespace and comments to minify CSS code.
Convert colors between HEX, RGB, and HSL formats.
Upload an image and get all favicon sizes + HTML link tags.
Generate custom placeholder images with any size, color, and text.
Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.
Design custom CSS border radius shapes with live preview.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Draw a Secret Santa with exclusions and share a private reveal link for each person.
Make custom bingo cards from your own words — play, print, or share a link.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
Rank anything with quick 1-v-1 matchups → a full ordered list you can share.
Convert Markdown to a fully customized, RTL-ready PDF.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
