Elemen Dasar
Progress (Batang Kemajuan)
Indikator persentase pemenuhan berkas atau durasi proses permohonan.
Menampilkan kemajuan kuantitatif dari suatu proses (misal: kelengkapan berkas 75%) untuk membangkitkan efek psikologis Goal-Gradient.
Pratinjau Komponen
Kelengkapan Berkas Persyaratan
75%
<div>
<div style="font-size: 13px; margin-bottom: 6px; font-weight: 500;">
<span>Memverifikasi Tanda Tangan Elektronik...</span>
</div>
<div class="mjl-progress mjl-progress--indeterminate">
<div class="mjl-progress__bar"></div>
</div>
</div>
Penggunaan CSS Murni
<!-- Determinate Progress (75%) -->
<div class="mjl-progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="mjl-progress__bar" style="width: 75%;"></div>
</div>
<!-- Indeterminate Loading Bar -->
<div class="mjl-progress mjl-progress--indeterminate">
<div class="mjl-progress__bar"></div>
</div>
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-progress" role="progressbar" aria-label="Unggah berkas KTP"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="65" aria-valuetext="65%">
<div class="mjl-progress__bar" style="width: 65%;"></div>
</div>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlProgress } from '@majalengka/vue';
const persen = ref(65);
</script>
<template>
<MjlProgress label="Unggah berkas KTP" :value="persen" />
<MjlProgress label="Memverifikasi data" indeterminate size="sm" />
</template>
export function MjlProgress({ label, value, max = 100 }: { label: string; value: number; max?: number }) {
const persen = Math.round((Math.min(Math.max(value, 0), max) / max) * 100);
return (
<div className="mjl-progress" role="progressbar" aria-label={label}
aria-valuemin={0} aria-valuemax={max} aria-valuenow={value} aria-valuetext={`${persen}%`}>
<div className="mjl-progress__bar" style={{ width: `${persen}%` }} />
</div>
);
}
// Pemakaian: <MjlProgress label="Unggah berkas KTP" value={65} />
import { Component, computed, input } from '@angular/core';
@Component({
selector: 'mjl-progress',
standalone: true,
template: `
<div class="mjl-progress" role="progressbar" [attr.aria-label]="label()"
aria-valuemin="0" [attr.aria-valuemax]="max()" [attr.aria-valuenow]="value()" [attr.aria-valuetext]="percent() + '%'">
<div class="mjl-progress__bar" [style.width.%]="percent()"></div>
</div>
`,
})
export class MjlProgress {
label = input.required<string>();
value = input(0);
max = input(100);
percent = computed(() => Math.round((this.value() / this.max()) * 100));
}
{{-- resources/views/components/mjl/progress.blade.php --}}
@props(['label', 'value' => 0, 'max' => 100])
@php($persen = (int) round($value / $max * 100))
<div class="mjl-progress" role="progressbar" aria-label="{{ $label }}"
aria-valuemin="0" aria-valuemax="{{ $max }}" aria-valuenow="{{ $value }}" aria-valuetext="{{ $persen }}%">
<div class="mjl-progress__bar" style="width: {{ $persen }}%"></div>
</div>
{{-- Pemakaian --}}
<x-mjl.progress label="Kelengkapan berkas" :value="$berkas->persen_lengkap" />
<?php $persen = 65; ?>
<div class="mjl-progress" role="progressbar" aria-label="Kelengkapan berkas"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="<?= $persen ?>" aria-valuetext="<?= $persen ?>%">
<div class="mjl-progress__bar" style="width: <?= $persen ?>%;"></div>
</div>
Tanpa value, progress otomatis menjadi indeterminate dan aria-valuenow tidak dikirim.