Ngorei Doc
Ngorei Doc
Dokumentasi komponen Spinners yang dapat digunakan dalam NexaUI framework.
Spinner dasar dengan berbagai ukuran dan warna.
<!-- Spinner ukuran -->
<div class="nx-spinner"></div>
<div class="nx-spinner nx-spinner-sm"></div>
<div class="nx-spinner nx-spinner-lg"></div>
<!-- Spinner warna dasar -->
<div class="nx-spinner nx-spinner-primary"></div>
<div class="nx-spinner nx-spinner-secondary"></div>
<div class="nx-spinner nx-spinner-success"></div>
<div class="nx-spinner nx-spinner-danger"></div>
<div class="nx-spinner nx-spinner-warning"></div>
<div class="nx-spinner nx-spinner-info"></div>
<div class="nx-spinner nx-spinner-light"></div>
<div class="nx-spinner nx-spinner-dark"></div>
<div class="nx-spinner nx-spinner-white"></div>
<!-- Spinner warna Windows style -->
<div class="nx-spinner nx-spinner-blue"></div>
<div class="nx-spinner nx-spinner-purple"></div>
<div class="nx-spinner nx-spinner-teal"></div>
<div class="nx-spinner nx-spinner-green"></div>
<div class="nx-spinner nx-spinner-system"></div>
<div class="nx-spinner nx-spinner-error"></div>
<!-- Spinner warna aksen & tambahan -->
<div class="nx-spinner nx-spinner-accent"></div>
<div class="nx-spinner nx-spinner-accent-light"></div>
<div class="nx-spinner nx-spinner-modern"></div>
<div class="nx-spinner nx-spinner-link"></div>
<div class="nx-spinner nx-spinner-ghost"></div>
<div class="nx-spinner nx-spinner-black"></div>
<!-- Ukuran default -->
<Spinner />
<!-- Dengan ukuran -->
<Spinner size="sm" />
<Spinner size="lg" />
<!-- Dengan warna -->
<Spinner color="primary" />
<Spinner color="secondary" />
<Spinner color="success" />
<!-- dst -->
<!-- Kombinasi ukuran dan warna -->
<Spinner size="lg" color="primary" />
<!-- Spinner Border (default) -->
<Spinner />
<Spinner size="sm" />
<Spinner size="lg" color="primary" />
Variasi spinner dengan efek pertumbuhan.
<!-- Spinner grow ukuran -->
<div class="nx-spinner-grow"></div>
<div class="nx-spinner-grow nx-spinner-grow-sm"></div>
<div class="nx-spinner-grow nx-spinner-grow-lg"></div>
<!-- Spinner grow warna -->
<div class="nx-spinner-grow nx-spinner-primary"></div>
<div class="nx-spinner-grow nx-spinner-success"></div>
<div class="nx-spinner-grow nx-spinner-danger"></div>
<!-- Spinner Grow -->
<Spinner type="grow" />
<Spinner type="grow" size="sm" />
<Spinner type="grow" size="lg" color="primary" />
<!-- Spinner Grow dengan warna -->
<Spinner type="grow" color="success" />
<Spinner type="grow" color="danger" />
Menggunakan spinner di dalam tombol untuk indikator loading.
<button class="nx-btn nx-btn-primary">
<span class="nx-spinner nx-spinner-sm nx-spinner-white"></span>
<span class="text-white">Loading...</span>
</button>
<button class="nx-btn nx-btn-success">
<span class="nx-spinner-grow nx-spinner-grow-sm nx-spinner-white"></span>
<span class="text-white">Loading...</span>
</button>
<button class="nx-btn nx-btn-primary">
<Spinner size="sm" color="white" />
<span class="text-white">Loading...</span>
</button>
<button class="nx-btn nx-btn-success">
<Spinner type="grow" size="sm" color="white" />
<span class="text-white">Loading...</span>
</button>