🌀 CSS Illusion: Hypnotic Spinner

Not your average loader — this CSS hypnotic animation is an eye-catcher you can use for loading states or just to impress your users!

<div class="hypno-loader"></div>

<style>
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.hypno-loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#0ff, #00f, #f0f, #0ff);
  animation: spin 2s linear infinite;
  mask-image: radial-gradient(circle, black 40%, transparent 41%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 41%);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

🎨 Use it in creative portfolios, game loading pages, or as Easter eggs in your site.

More weird, wild, and useful CSS hacks daily here → @Html_codee

#css #animation #creative #html #frontend #weirdcss