Loading - JavaScript

Loading

ReactVueJS + CSS

Struktur HTML

Spinner

Copy

<div class="ina-spinner ina-spinner--spinner-only">
  <div class="ina-spinner__element ina-spinner__element--size-md ina-spinner__element--color-primary"></div>
</div>

Skeleton

Copy

<div class="ina-skeleton ina-skeleton--width-full ina-skeleton--height-md ina-skeleton--rounded-md"></div>

ProgressBar

Copy

<div class="ina-progress-bar">
  <div class="ina-progress-bar__fill ina-progress-bar__fill--primary" style="width: 75%"></div>
</div>

CircleProgressBar

Copy

<div class="ina-circle-progress-bar" style="--ina-circle-progress-size: 48px;">
  <svg class="ina-circle-progress-bar__svg" width="100%" height="100%" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle class="ina-circle-progress-bar__track" cx="24" cy="24" r="22.5" stroke-width="3" />
    <circle class="ina-circle-progress-bar__progress" cx="24" cy="24" r="22.5" stroke-width="3" stroke-dasharray="141.37" stroke-dashoffset="35.34" />
  </svg>
</div>

Contoh Penggunaan

Contoh 1 - Spinner: Basic

Preview Code

Copy

<div style="padding: 20px; display: flex; flex-direction: column; gap: 24px">
  <div class="w-full flex items-center justify-center">
    <div class="flex gap-4 flex-wrap items-center">
      <div class="ina-spinner ina-spinner--spinner-only">
        <div
          class="ina-spinner__element ina-spinner__element--size-xs ina-spinner__element--color-primary"
        >
        </div>
      </div>
      <div class="ina-spinner ina-spinner--spinner-only">
        <div
          class="ina-spinner__element ina-spinner__element--size-sm ina-spinner__element--color-primary"
        >
        </div>
      </div>
      <div class="ina-spinner ina-spinner--spinner-only">
        <div
          class="ina-spinner__element ina-spinner__element--size-md ina-spinner__element--color-primary"
        >
        </div>
      </div>
      <div class="ina-spinner ina-spinner--spinner-only">
        <div
          class="ina-spinner__element ina-spinner__element--size-lg ina-spinner__element--color-primary"
        >
        </div>
      </div>
    </div>
  </div>
</div>

Contoh 2 - Spinner: With Title & Subtitle

Preview Code

Mencari Informasi

Mohon menunggu hasil pencarian Anda.

Copy

<div style="padding: 20px; display: flex; flex-direction: column; gap: 24px">
  <div class="ina-spinner">
    <div
      class="ina-spinner__element ina-spinner__element--size-lg ina-spinner__element--color-primary"
    >
    </div>
    <div class="ina-spinner__title">Mencari Informasi</div>
    <div class="ina-spinner__subtitle">Mohon menunggu hasil pencarian Anda.</div>
  </div>
</div>

Contoh 3 - Skeleton: Basic Rectangular

Preview Code

Copy

<div style="padding: 20px; display: flex; flex-direction: column; gap: 16px">
  <div
    class="ina-skeleton ina-skeleton--width-full ina-skeleton--height-md ina-skeleton--rounded-md"
  >
  </div>
  <div
    class="ina-skeleton ina-skeleton--width-full ina-skeleton--height-sm ina-skeleton--rounded-md"
    style="height: 16px"
  >
  </div>
  <div style="display: flex; gap: 8px">
    <div class="ina-skeleton ina-skeleton--rounded-full" style="width: 56px; height: 56px"></div>
    <div class="ina-skeleton ina-skeleton--rounded-full" style="width: 56px; height: 56px"></div>
    <div class="ina-skeleton ina-skeleton--rounded-full" style="width: 56px; height: 56px"></div>
  </div>
  <div
    class="ina-skeleton ina-skeleton--color-gray ina-skeleton--rounded-md"
    style="width: 50%; height: 24px"
  >
  </div>
</div>

Contoh 4 - Skeleton: Multiple Variants

Preview Code

Copy

<div style="padding: 20px; display: flex; flex-direction: column; gap: 16px">
  <div style="display: flex; gap: 12px; align-items: center">
    <div class="ina-skeleton ina-skeleton--rounded-full" style="width: 40px; height: 40px"></div>
    <div style="flex: 1; display: flex; flex-direction: column; gap: 8px">
      <div
        class="ina-skeleton ina-skeleton--width-full ina-skeleton--rounded-md"
        style="height: 16px"
      >
      </div>
      <div
        class="ina-skeleton ina-skeleton--width-full ina-skeleton--rounded-md"
        style="width: 60%; height: 14px"
      >
      </div>
    </div>
  </div>
  <div class="ina-skeleton ina-skeleton--width-full ina-skeleton--rounded-md" style="height: 200px">
  </div>
</div>

Contoh 5 - ProgressBar: Basic

Preview Code

Copy

<div style="padding: 20px">
  <div class="ina-progress-bar" id="progress-bar-basic">
    <div
      class="ina-progress-bar__fill ina-progress-bar__fill--primary"
      id="progress-bar-basic-fill"
      style="width: 0%"
    >
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const progressBar = document.getElementById('progress-bar-basic-fill');
    if (!progressBar) return;

    let progress = 0;

    const updateProgress = () => {
      progress = progress >= 100 ? 0 : progress + 10;
      progressBar.style.width = progress + '%';
    };

    // Update progress every 500ms
    const interval = setInterval(updateProgress, 500);

    // Cleanup on page unload
    window.addEventListener('beforeunload', () => {
      clearInterval(interval);
    });
  });
</script>

Contoh 6 - ProgressBar: With Different Variants

Preview Code

Copy

<div style="padding: 20px; display: flex; flex-direction: column; gap: 16px">
  <div class="ina-progress-bar ina-progress-bar--height-sm" id="progress-bar-variant-1">
    <div
      class="ina-progress-bar__fill ina-progress-bar__fill--primary"
      id="progress-bar-variant-1-fill"
      style="width: 0%"
    >
    </div>
  </div>
  <div class="ina-progress-bar ina-progress-bar--height-md" id="progress-bar-variant-2">
    <div
      class="ina-progress-bar__fill ina-progress-bar__fill--success"
      id="progress-bar-variant-2-fill"
      style="width: 0%"
    >
    </div>
  </div>
  <div class="ina-progress-bar ina-progress-bar--height-lg" id="progress-bar-variant-3">
    <div
      class="ina-progress-bar__fill ina-progress-bar__fill--warning"
      id="progress-bar-variant-3-fill"
      style="width: 0%"
    >
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const progressBars = [
      document.getElementById('progress-bar-variant-1-fill'),
      document.getElementById('progress-bar-variant-2-fill'),
      document.getElementById('progress-bar-variant-3-fill'),
    ].filter(Boolean);

    if (progressBars.length === 0) return;

    let progress = 0;

    const updateProgress = () => {
      progress = progress >= 100 ? 0 : progress + 10;
      progressBars.forEach((bar) => {
        if (bar) {
          bar.style.width = progress + '%';
        }
      });
    };

    // Update progress every 500ms
    const interval = setInterval(updateProgress, 500);

    // Cleanup on page unload
    window.addEventListener('beforeunload', () => {
      clearInterval(interval);
    });
  });
</script>

Contoh 7 - CircleProgressBar: Basic & Variants

Preview Code

Default

Primary

Positive

Negative

Static & Thick

75%

Copy

<div class="p-5 flex flex-wrap gap-8 items-center justify-center">
  <div class="flex flex-col items-center gap-2">
    <span class="text-sm font-medium">Default</span>
    <!-- Default (20px) -->
    <div class="ina-circle-progress-bar" style="--ina-circle-progress-size: 20px;">
      <svg
        class="ina-circle-progress-bar__svg"
        width="100%"
        height="100%"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle class="ina-circle-progress-bar__track" cx="10" cy="10" r="8.5" stroke-width="3"
        ></circle>
        <circle
          class="ina-circle-progress-bar__progress"
          cx="10"
          cy="10"
          r="8.5"
          stroke-width="3"
          stroke-dasharray="53.407"
          stroke-dashoffset="53.407"
          data-progress-circle></circle>
      </svg>
    </div>
  </div>

  <div class="flex flex-col items-center gap-2">
    <span class="text-sm font-medium">Primary</span>
    <!-- Primary (48px) -->
    <div
      class="ina-circle-progress-bar ina-circle-progress-bar--primary"
      style="--ina-circle-progress-size: 48px;"
    >
      <svg
        class="ina-circle-progress-bar__svg"
        width="100%"
        height="100%"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle class="ina-circle-progress-bar__track" cx="24" cy="24" r="22.5" stroke-width="3"
        ></circle>
        <circle
          class="ina-circle-progress-bar__progress"
          cx="24"
          cy="24"
          r="22.5"
          stroke-width="3"
          stroke-dasharray="141.37"
          stroke-dashoffset="141.37"
          data-progress-circle></circle>
      </svg>
    </div>
  </div>

  <div class="flex flex-col items-center gap-2">
    <span class="text-sm font-medium">Positive</span>
    <!-- Success (48px) -->
    <div
      class="ina-circle-progress-bar ina-circle-progress-bar--positive"
      style="--ina-circle-progress-size: 48px;"
    >
      <svg
        class="ina-circle-progress-bar__svg"
        width="100%"
        height="100%"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle class="ina-circle-progress-bar__track" cx="24" cy="24" r="22.5" stroke-width="3"
        ></circle>
        <circle
          class="ina-circle-progress-bar__progress"
          cx="24"
          cy="24"
          r="22.5"
          stroke-width="3"
          stroke-dasharray="141.37"
          stroke-dashoffset="141.37"
          data-progress-circle></circle>
      </svg>
    </div>
  </div>

  <div class="flex flex-col items-center gap-2">
    <span class="text-sm font-medium">Negative</span>
    <!-- Negative (48px) -->
    <div
      class="ina-circle-progress-bar ina-circle-progress-bar--negative"
      style="--ina-circle-progress-size: 48px;"
    >
      <svg
        class="ina-circle-progress-bar__svg"
        width="100%"
        height="100%"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle class="ina-circle-progress-bar__track" cx="24" cy="24" r="22.5" stroke-width="3"
        ></circle>
        <circle
          class="ina-circle-progress-bar__progress"
          cx="24"
          cy="24"
          r="22.5"
          stroke-width="3"
          stroke-dasharray="141.37"
          stroke-dashoffset="141.37"
          data-progress-circle></circle>
      </svg>
    </div>
  </div>

  <div class="flex flex-col items-center gap-2">
    <span class="text-sm font-medium">Static & Thick</span>
    <!-- Primary (48px), Stroke 6, Progress 75% -->
    <!-- r = (48-6)/2 = 21. Circumference = 2 * pi * 21 = ~131.95. Offset(75%) = 131.95 * 0.25 = ~32.99 -->
    <div class="flex items-center gap-2">
      <div
        class="ina-circle-progress-bar ina-circle-progress-bar--primary"
        style="--ina-circle-progress-size: 48px;"
      >
        <svg
          class="ina-circle-progress-bar__svg"
          width="100%"
          height="100%"
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle class="ina-circle-progress-bar__track" cx="24" cy="24" r="21" stroke-width="6"
          ></circle>
          <circle
            class="ina-circle-progress-bar__progress"
            cx="24"
            cy="24"
            r="21"
            stroke-width="6"
            stroke-dasharray="131.95"
            stroke-dashoffset="32.99"></circle>
        </svg>
      </div>
      <span class="text-sm font-medium">75%</span>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const circles = document.querySelectorAll('[data-progress-circle]');

    let progress = 0;

    const updateProgress = () => {
      progress = progress >= 100 ? 0 : progress + 10;

      circles.forEach((circle) => {
        const radius = parseFloat(circle.getAttribute('r') || '0');
        const circumference = 2 * Math.PI * radius;
        const offset = circumference - (progress / 100) * circumference;
        // Don't modify stroke-dasharray as it is constant
        (circle as SVGElement).style.strokeDashoffset = offset.toString();
      });
    };

    // Update progress every 500ms
    const interval = setInterval(updateProgress, 500);

    // Cleanup on window unload or component unmount simulation
    // Note: Astro islands might handle this differently, but window unload is safe for simple examples
    window.addEventListener('beforeunload', () => {
      clearInterval(interval);
    });
  });
</script>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan