Elemen Dasar
Skeleton (Pemuat Shimmer)
Placeholder pemuatan konten beranimasi shimmer halus yang mematuhi ambang batas Doherty dan aksesibilitas reduced-motion.
Skeleton mempertahankan tata letak halaman saat data sedang diambil dari server, mencegah pergeseran tata letak kumulatif (CLS) dan mematuhi Ambang Batas Doherty (< 400ms).
Pratinjau Komponen
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<div class="mjl-card" aria-busy="true" aria-label="Memuat data layanan">
<span class="mjl-skeleton mjl-skeleton--circle" style="width: 40px; height: 40px;" aria-hidden="true"></span>
<span class="mjl-skeleton mjl-skeleton--title" aria-hidden="true"></span>
<span class="mjl-skeleton mjl-skeleton--text" aria-hidden="true"></span>
<span class="mjl-skeleton mjl-skeleton--text" style="width: 60%;" aria-hidden="true"></span>
</div>
<script setup lang="ts">
import { MjlSkeleton } from '@majalengka/vue';
defineProps<{ loading: boolean }>();
</script>
<template>
<div v-if="loading" class="mjl-card" aria-busy="true" aria-label="Memuat data layanan">
<MjlSkeleton variant="circle" width="40px" height="40px" />
<MjlSkeleton variant="title" />
<MjlSkeleton variant="text" />
<MjlSkeleton variant="text" width="60%" />
</div>
</template>
import type { CSSProperties } from 'react';
export function MjlSkeleton({ variant = 'text', style }: { variant?: 'text' | 'title' | 'circle'; style?: CSSProperties }) {
return <span className={`mjl-skeleton mjl-skeleton--${variant}`} style={style} aria-hidden="true" />;
}
// Pemakaian
export const KartuMemuat = () => (
<div className="mjl-card" aria-busy="true" aria-label="Memuat data layanan">
<MjlSkeleton variant="circle" style={{ width: 40, height: 40 }} />
<MjlSkeleton variant="title" />
<MjlSkeleton />
</div>
);
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-skeleton',
standalone: true,
template: `<span class="mjl-skeleton mjl-skeleton--{{ variant() }}" [style.width]="width()" aria-hidden="true"></span>`,
})
export class MjlSkeleton {
variant = input<'text' | 'title' | 'circle'>('text');
width = input<string>();
}
// Pemakaian:
// <div class="mjl-card" aria-busy="true"><mjl-skeleton variant="title" /><mjl-skeleton width="60%" /></div>
{{-- resources/views/components/mjl/skeleton.blade.php --}}
@props(['variant' => 'text'])
<span {{ $attributes->class("mjl-skeleton mjl-skeleton--{$variant}") }} aria-hidden="true"></span>
{{-- Pemakaian (mis. di dalam wire:loading Livewire) --}}
<div class="mjl-card" aria-busy="true" aria-label="Memuat data layanan">
<x-mjl.skeleton variant="title" />
<x-mjl.skeleton />
<x-mjl.skeleton style="width: 60%" />
</div>
<div class="mjl-card" aria-busy="true" aria-label="Memuat data layanan">
<span class="mjl-skeleton mjl-skeleton--title" aria-hidden="true"></span>
<?php for ($i = 0; $i < 3; $i++): ?>
<span class="mjl-skeleton mjl-skeleton--text" aria-hidden="true"></span>
<?php endfor; ?>
</div>
Skeleton bersifat dekoratif (aria-hidden). Tandai wadahnya dengan aria-busy="true" selama data dimuat.
Aksesibilitas (Reduced Motion)
Bila pengguna mengaktifkan preferensi Reduced Motion pada sistem operasinya, animasi gelombang berkilau (shimmer) akan otomatis dinonaktifkan dan digantikan dengan warna abu-abu statis yang tenang.
<!-- Kartu Pemuatan Skeleton -->
<div class="mjl-card">
<div class="mjl-skeleton mjl-skeleton--circle" style="width: 40px; height: 40px;"></div>
<div class="mjl-skeleton mjl-skeleton--title" style="margin-top: 12px;"></div>
<div class="mjl-skeleton mjl-skeleton--text"></div>
<div class="mjl-skeleton mjl-skeleton--text" style="width: 60%;"></div>
</div>