Membuat Spiner svg dengan CSS

Tinggalkan Balasan

Spinner svg

Untuk menampilkan animasi lingkaran berputar saat menunggu proses di web sebaiknya kita gunakan html tag karena lebih ringan dari pada menggunakan file gif. Elemen HTML SVG (Scalable Vector Graphics) dapat menampilkan bentuk gambar lingkaran , persegi , poligon atau lainnya.
Kita akan memanfaatkannya untuk membuat animasi lingkaran berputar dengan rule CSS @keyframes animation.

Berikut coding selengkapnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Spinner</title>
  <style>
  @keyframes spin {to {stroke-dashoffset:-260;}}/* minus = searah jarum jam */
  .spinner circle {
    fill: #ffff00; /* warna lingkaran */
    stroke: #ff0000; /* warna garis */
    stroke-width: 15; /* tebal garis */
    stroke-linecap: round; /* bentuk ujung garis */
    stroke-dasharray: 0, 0, 80, 50;  /* garis putus */
    stroke-dashoffset: 0; /* tempat mulai putus */
    animation: spin 1s infinite linear; /* kecepatan putar 1 detik */
  }
  </style>
</head>
<body>
  <h3>Membuat Spiner svg dengan CSS</h3>  
  <svg class="spinner" viewBox="0 0 100 100" width="25" height="25">
    <circle cx="50" cy="50" r="40" transform="rotate(-90,50,50)" />
  </svg>
</body>
</html>

Selamat mencoba. Semoga bermanfaat.

Leave your comment