JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<div id="loading-animation">
  <!-- SVG animasyonu buraya gelecek -->
  <svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="hurricane-icon"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 208C0 104.4 75.7 18.5 174.9 2.6C184 1.2 192 8.6 192 17.9V81.2c0 8.4 6.5 15.3 14.7 16.5C307 112.5 384 199 384 303.4c0 103.6-75.7 189.5-174.9 205.4c-9.2 1.5-17.1-5.9-17.1-15.2V430.2c0-8.4-6.5-15.3-14.7-16.5C77 398.9 0 312.4 0 208zm288 48A96 96 0 1 0 96 256a96 96 0 1 0 192 0zm-96-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
</div>
<div id="site-name">
  mintik.com
</div>

CSS

.hrc {
  animation: rotate 0.1s linear infinite; /* Dönen animasyon */
}

@keyframes rotate {
  from {
    transform: rotate(0deg); /* Başlangıç rotasyonu */
  }
  to {
    transform: rotate(-360deg); /* Bitiş rotasyonu */
  }
}