/* Butterfly loader created by WerlynDev in Uiverse.io*/

.loader {
  --sizeLoader: 60px;
  --sizeLoaderHalf: calc(var(--sizeLoader) / 2);
  --stepBtf: calc(var(--sizeLoader) / 10);
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: var(--sizeLoader);
  height: var(--sizeLoader);
}

.loader:hover {
  cursor: progress;
}

.loader[anim1] {
  animation: anim1 0.3s alternate ease-in-out infinite;
}

.loader:not([anim1]) {
  right: var(--sizeLoaderHalf);
  transform-origin: center right;
  animation: moveAround 2s linear infinite;
}

.loader[showShadow] {
  filter: drop-shadow(0 10px 10px #060606de);
}

.loader svg:nth-child(1) {
  position: relative;
  height: 100%;
  left: 2%;
  transform-origin: center right;
  animation: wing 0.5s ease-in-out infinite;
}

.loader svg:nth-child(2) {
  height: 50%;
}

.loader svg:nth-child(3) {
  position: relative;
  height: 100%;
  left: -2%;
  transform-origin: center left;
  animation: wing 0.5s ease-in-out infinite;
}

@keyframes wing {
  0% {
    transform: rotateY(0deg);
  }

50% {
    transform: rotateY(60deg);
  }

100% {
    transform: rotateY(0deg);
  }
}

@keyframes moveAround {
  0% {
    transform: rotate(0deg);
  }

100% {
    transform: rotate(360deg);
  }
}

@keyframes anim1 {
  from {
    transform: translateY(0px);
  }

to {
    transform: translateY(var(--stepBtf));
  }
}

/* @media (prefers-color-scheme: dark) {
  .loader[showShadow]{
    filter: drop-shadow(0 10px 10px #dbdbdbde);
  }
} */

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Butterfly Loader – A Unique SVG-Based Spinner

This creative loader design takes a fresh approach to typical loading indicators by transforming them into a fluttering butterfly. It’s built entirely with SVG and CSS, making it lightweight, scalable, and perfect for web projects that aim for a bit of charm and uniqueness during loading states.

A Butterfly Made of SVG

The loader consists of three separate SVG elements:

The left wing
A central body
The right wing

These pieces are arranged side-by-side inside a flex container. The SVG shapes are detailed and abstract, giving the butterfly a stylized, modern look in solid black.

Wing Flutter Animation

To mimic the motion of a butterfly in flight, each wing rotates back and forth along the Y-axis using a smooth CSS animation. The transform origin is set to the inner edge of each wing, creating a natural flapping effect.

As both wings animate at the same time, it gives the illusion of the butterfly fluttering in place. The motion repeats endlessly, making it a perfect fit for loading states.

Full Loader Movement

Beyond the wing movement, the entire butterfly can also rotate around in a circle using an animation that rotates the loader container. This adds an extra layer of dynamic motion that makes the loader feel lively and engaging.

Alternatively, a vertical “bounce” animation can be toggled, which makes the butterfly gently hop up and down while it flaps—ideal for a more subtle visual style.

Interactive and Stylish

When users hover over the butterfly loader, the cursor changes to a progress icon. A soft drop shadow is also included by default, enhancing the sense of depth and making the butterfly stand out on light or dark backgrounds.

Designers can even customize the shadow effect depending on the system color scheme, making the loader adaptable to different themes with minimal adjustments.

Perfect for Creative Interfaces

This butterfly loader stands out from more conventional spinners or bars by offering a whimsical, animated touch. It works great on personal portfolios, children’s websites, creative agencies, or any page where playful design matters.

Its smooth animations and SVG-based approach ensure that it performs well across devices while keeping your interface looking polished and fun during loading times.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.