Yükleme döner simgesi

Web özellikleri: prefers-reduced-motion medya sorgusu Konik gradyanlar <progress>

Yükleme çarkı (veya etkinlik göstergesi), tam sürenin bilinmediği durumlarda kullanıcılara bir işlemin devam ettiğini bildirir. İlerleme halkasından farklı olarak, dönen simge "belirsizdir" ve etkinliği belirtmek için genellikle animasyon kullanır.

Bu kılavuzda, aşağıdaki yöntemlerle bir dönen simge uygulanır:

  • Anlamsal temel olarak yerel <progress> öğesini kullanma. value özelliği atlandığında tarayıcı, bunu belirsiz bir ilerleme çubuğu olarak değerlendirir ve yardımcı teknolojiler tarafından doğru şekilde duyurulmasını sağlar.
  • Görsel bir "iz" oluşturmak için bileşeni conic-gradient() ile şekillendirme ve ortasını boşaltarak halka haline getirmek için background-clip: border-area kullanma.
  • CSS dönüşümlerini kullanarak ve tüm kullanıcılar için rahat bir deneyim sağlamak amacıyla prefers-reduced-motion özelliğine uyarak dönen simgeye verimli bir şekilde animasyon ekleme.

Süresi bilinen belirli görevleri işlemek için İlerleme halkası bölümüne bakın.

Uygulama

1. Brüt kar

Yerel <progress> öğesini hem semantik doğruluk kaynağı hem de görsel bileşen olarak kullanın. value özelliği olmadan, örtük olarak belirsizdir.

<progress aria-label="Loading" class="loading-spinner"></progress>

2. Stiller

Yerel kullanıcı arayüzünü gizleme

<progress> öğesini dönen simge olarak biçimlendirmek için önce belirsiz ilerleme çubuklarının varsayılan tarayıcı stilini gizleyin.

/* Hide native bars */
progress.loading-spinner:indeterminate::-webkit-progress-bar {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::-webkit-progress-value {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::-moz-progress-bar {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::slider-fill {
  display: none;
  background: none;
}

Dönen Halka ve İz

Dönen simge, görsel bir iz oluşturmak için conic-gradient kullanır.

@property --arc-start {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --arc-end {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* Use a custom property to conditionally include the dash animation */
@property --progress-dash-animation {
  syntax: "*";
  inherits: false;
  initial-value: , progress-dash 3s ease-in-out infinite;
}

progress.loading-spinner:indeterminate {
  --_from: calc(90deg + var(--arc-start, 0deg));
  --_to: calc(90deg + var(--arc-end, 158deg));
  --size: 40px;
  --thickness: 2px;
  --spinner-color: #3b82f6;
  --track-color: #e2e5e7;
  --spinner-duration: 1.5s;
  --_used-spinner-duration: var(--spinner-duration);
  --spinner-timing: linear;

  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  appearance: none;

  /* Create the fading trail with dynamic angles */
  background: conic-gradient(
      from var(--_from),
      var(--spinner-color) calc(var(--_to) - var(--_from)),
      transparent 0
    )
    var(--track-color);

  @supports (background-clip: border-area) {
    background-clip: border-area;
    border: var(--thickness) solid transparent;
    background-origin: border-box;
  }

  /* ... fallback for background-clip: border-area ... */

  /* The dash animation is only included if @property is supported */
  animation:
    progress-spin var(--_used-spinner-duration) linear infinite
    var(--progress-dash-animation, );
}

@keyframes progress-spin {
  to {
    rotate: 1turn;
  }
}

@keyframes progress-dash {
  from {
    --arc-start: 0deg;
    --arc-end: 3deg;
  }
  50% {
    --arc-start: 100deg;
    --arc-end: 358deg;
  }
  to {
    --arc-start: 360deg;
    --arc-end: 363deg;
  }
}

Hareket Tercihlerine Uyma

Harekete duyarlı kullanıcılar, hızlı dönen öğeleri kafa karıştırıcı bulabilir. prefers-reduced-motion medya sorgusuna her zaman uyun. Kullanıcının --spinner-duration değerini geçersiz kılmak için dahili --_used-spinner-duration özelliğini ayarlayın.

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    /* Slow down the animation significantly rather than stopping it entirely,
       so the user still knows that the process is active. */
    --_used-spinner-duration: 6s;
  }
}

Yedek stratejiler

@property destekleniyorsa kesikli çizgi animasyonu, --progress-dash-animation özelliğinin initial-value aracılığıyla otomatik olarak eklenir. @property desteği olmayan tarayıcılarda özellik kaydı yoksayılır ve animasyon basit bir dönüşe geri döner. Bu yedek için JavaScript gerekmez.

background-clip: border-area özelliğini henüz desteklemeyen tarayıcılarda, ortayı boşaltmak için mask-image kullanın.

/* Fallback: use mask-image to create the ring */
@supports not (background-clip: border-area) {
  --clip-boundary: calc(100% - var(--thickness));
  mask-image: radial-gradient(
    farthest-side,
    transparent var(--clip-boundary),
    black var(--clip-boundary)
  );
  border: 0;
}