Frontend

Perkenalan Flex Layout Form Modal

Animate Accordion Alerts Badges Breadcrumb Button Button group Card Carousel Collapse Dropdown Navbar Offcanvas Popovers Progress Scrollspy Spinners Toasts Tooltips Media Object Menu Footer Sticky Scroll Table List Group Images Avatar Video Search Lightbox Sortable Thumbnav Feedback Stats Tabs Vector Icons

Progress NexaUI

Progress Bar

Dokumentasi komponen Progress Bar yang dapat digunakan untuk menampilkan indikator kemajuan dalam NexaUI framework.

Progress Bar Dasar

Progress bar dasar dengan berbagai warna dan ukuran.

Demo:

25%

50%

75%

Components


<div class="nx-progress">
  <div class="nx-progress-bar" style="width: 25%">25%</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-primary" style="width: 50%">50%</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-success" style="width: 75%">75%</div>
</div>

<Progress
  title="25%"
  class="nx-progress-bar"
  value="25"
/>

<Progress
  title="50%"
  class="nx-progress-bar nx-bg-primary"
  value="50"
/>

<Progress
  title="75%"
  class="nx-progress-bar nx-bg-success"
  value="75"
/>

Progress Bar Bergaris

Progress bar dengan efek bergaris.

Demo:

40%

60%

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-progress-striped" style="width: 40%">40%</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-progress-striped nx-bg-warning" style="width: 60%">60%</div>
</div>

<Progress
  title="40%"
  class="nx-progress-bar nx-progress-striped"
  value="40"
/>

<Progress
  title="60%"
  class="nx-progress-bar nx-progress-striped nx-bg-warning"
  value="60"
/>

Progress Bar Animasi

Progress bar dengan efek animasi bergerak.

Demo:

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-progress-striped nx-progress-animated"
  style="width: 75%">Loading...</div>
</div>

<Progress
  title="Loading..."
  class="nx-progress-bar nx-progress-striped nx-progress-animated"
  value="75"
/>

Variasi Warna

Progress bar tersedia dalam berbagai variasi warna untuk kebutuhan yang berbeda.

Demo:

Primary

Success

Warning

Danger

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-primary" style="width: 30%">Primary</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-success" style="width: 40%">Success</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-warning" style="width: 60%">Warning</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-danger" style="width: 80%">Danger</div>
</div>

<Progress
 title="Primary"
  class="nx-progress-bar nx-bg-primary"value="30"
/>

<Progress
 title="Success"
  class="nx-progress-bar nx-bg-success"value="40"
/>

<Progress
 title="Warning"
  class="nx-progress-bar nx-bg-warning"value="60"
/>

<Progress
 title="Danger"
  class="nx-progress-bar nx-bg-danger"value="80"
/>

Ukuran Progress Bar

Progress bar tersedia dalam tiga ukuran berbeda: kecil, normal, dan besar.

Demo:

Components


<div class="nx-progress nx-progress-sm">
  <div class="nx-progress-bar" style="width: 50%"></div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar" style="width: 50%"></div>
</div>

<div class="nx-progress nx-progress-lg">
  <div class="nx-progress-bar" style="width: 50%"></div>
</div>

<Progress
  title=""
  class="nx-progress nx-progress-sm"
  value="50"
/>

<Progress
  title=""
  class="nx-progress"
  value="50"
/>

<Progress
  title=""
  class="nx-progress nx-progress-lg"
  value="50"
/>

Progress Bar dengan Label

Tambahkan label di dalam progress bar untuk menampilkan informasi lebih detail.

Demo:

Mengunduh 25%

66 dari 100

Components


<div class="nx-progress">
  <div class="nx-progress-bar with-label" style="width: 25%">Mengunduh 25%</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar with-label nx-bg-success" style="width: 66%">66 dari 100</div>
</div>

<Progress
  title="Mengunduh 25%"
  class="nx-progress-bar with-label"
  value="25"
/>

<Progress
  title="66 dari 100"
  class="nx-progress-bar with-label nx-bg-success"
  value="66"
/>

Progress Bar Rounded

Progress bar dengan tampilan sudut yang lebih bulat.

Demo:

45%

80%

Components


<div class="nx-progress nx-progress-rounded">
  <div class="nx-progress-bar" style="width: 45%">45%</div>
</div>

<div class="nx-progress nx-progress-rounded">
  <div class="nx-progress-bar nx-bg-primary" style="width: 80%">80%</div>
</div>

<Progress
  title="45"
  class="nx-progress nx-progress-rounded"
  value="45"
/>

<Progress
  title="80"
  class="nx-progress nx-progress-rounded nx-bg-primary"
  value="80"
/>

Multiple Progress Bars

Menggabungkan beberapa progress bar dalam satu container untuk menampilkan berbagai progress secara bersamaan.

Demo:

30%

20%

10%

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-success" style="width: 30%">30%</div>
  <div class="nx-progress-bar nx-bg-warning" style="width: 20%">20%</div>
  <div class="nx-progress-bar nx-bg-danger" style="width: 10%">10%</div>
</div>


. . .

Progress Bar dengan Background

Progress bar dengan variasi background container yang berbeda.

Demo:

40%

60%

75%

Components


<div class="nx-progress nx-bg-light">
  <div class="nx-progress-bar nx-bg-primary" style="width: 40%">40%</div>
</div>

<div class="nx-progress nx-bg-dark">
  <div class="nx-progress-bar nx-bg-warning" style="width: 60%">60%</div>
</div>

<div class="nx-progress nx-bg-gradient">
  <div class="nx-progress-bar nx-bg-success" style="width: 75%">75%</div>
</div>


. . .

Progress Bar Vertikal

Progress bar dengan orientasi vertikal untuk tampilan yang berbeda.

25%

50%

75%

Components


<div class="nx-progress-vertical">
  <div class="nx-progress-bar" style="height: 25%">25%</div>
</div>

<div class="nx-progress-vertical">
  <div class="nx-progress-bar nx-bg-success" style="height: 50%">50%</div>
</div>

<div class="nx-progress-vertical">
  <div class="nx-progress-bar nx-bg-warning" style="height: 75%">75%</div>
</div>


. . .

Progress Bar Interaktif

Progress bar yang dapat dikontrol dengan tombol atau input.

Demo:

Components


<div class="nx-progress mb-3">
  <div id="interactiveProgress" class="nx-progress-bar nx-bg-primary"
  style="width: 0%">0%</div>
</div>

<div class="nx-btn-group">
  <button class="nx-btn nx-btn-sm nx-btn-primary" onclick="decreaseProgress()">-</button>
  <button class="nx-btn nx-btn-sm nx-btn-primary" onclick="increaseProgress()">+</button>
</div>


. . .

Progress Bar Gradient

Progress bar dengan efek gradient warna.

Demo:

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-progress-striped nx-progress-animated nx-bg-gradient" 
  style="width: 75%">Loading...</div>
</div>

<Progress
  title="Loading..."
  class="nx-progress-bar nx-progress-striped nx-progress-animated nx-bg-gradient"
  value="75"
/>

Progress Bar dengan Icon

Menambahkan ikon di dalam progress bar untuk informasi visual tambahan.

Demo:

Downloading... 65%

Syncing... 80%

Processing 45%

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-primary" style="width: 65%">
    <span class="nx-progress-icon">
      <i class="fas fa-download"></i>
    </span>
    Downloading... 65%
  </div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-success" style="width: 80%">
    <span class="nx-progress-icon">
      <i class="fas fa-sync fa-spin"></i>
    </span>
    Syncing... 80%
  </div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-warning" style="width: 45%">
    <span class="nx-progress-icon">
      <i class="fas fa-check"></i>
    </span>
    Processing 45%
  </div>
</div>

<Progress
 title='
  <span  class="nx-progress-icon">
      <i  class="fas fa-download"></i>
    </span>
    Downloading... 65%'
 class="nx-progress-bar nx-bg-primary"
 value="60"
/>

<Progress
 title='
  <span  class="nx-progress-icon">
      <i  class="fas fa-sync fa-spin"></i>
    </span>
    Syncing... 80%'
 class="nx-progress-bar nx-bg-success"
 value="80"
/>

<Progress
 title='
  <span  class="nx-progress-icon">
      <i  class="fas fa-check"></i>
    </span>
    Processing 45%'
 class="nx-progress-bar nx-bg-warning"
 value="45"
/>

Progress Bar dengan Tooltip

Menampilkan tooltip saat hover pada progress bar.

Demo:

65%

80%

45%

Components


<div class="nx-progress mb-3">
  <div class="nx-progress-bar nx-bg-primary" style="width: 65%" 
  data-tooltip="Downloading: 65%">65%</div>
</div>

<div class="nx-progress mb-3">
  <div class="nx-progress-bar nx-bg-success" style="width: 80%" 
  data-tooltip="80 dari 100 file">80%</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-warning" style="width: 45%" 
  data-tooltip="Processing: 45%">45%</div>
</div>


. . .

Progress Bar Stack

Progress bar yang ditumpuk vertikal.

Demo:

30%

20%

10%

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-bg-success" style="width: 30%">30%</div>
  <div class="nx-progress-bar nx-bg-warning" style="width: 20%">20%</div>
  <div class="nx-progress-bar nx-bg-danger" style="width: 10%">10%</div>
</div>


. . .

Progress Bar Custom Animation

Animasi kustom untuk progress bar.

Demo:

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-progress-striped nx-progress-animated nx-bg-gradient"
  style="width: 75%">Loading...</div>
</div>

<Progress
  title='Loading...'
  class="nx-progress-bar nx-progress-striped nx-progress-animated nx-bg-gradient"
  value="75"
/>

Warna Windows

Progress bar dengan warna dasar Windows.

Demo:

Windows Blue

Windows Purple

Windows Teal

Windows Green

Components


<div class="nx-progress">
  <div class="nx-progress-bar nx-win-blue" style="width: 25%">Windows Blue</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-win-purple" style="width: 50%">Windows Purple</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-win-teal" style="width: 75%">Windows Teal</div>
</div>

<div class="nx-progress">
  <div class="nx-progress-bar nx-win-green" style="width: 90%">Windows Green</div>
</div>

<Progress
  title='Windows Blue'
  class="nx-progress-bar nx-win-blue"
  value="25"
/>

<Progress
  title='Windows Purple'
  class="nx-progress-bar nx-win-purple"
  value="50"
/>

<Progress
  title='Windows Teal'
  class="nx-progress-bar nx-win-teal"
  value="75"
/>

<Progress
  title='Windows Green'
  class="nx-progress-bar nx-win-green"
  value="90"
/>

Progress Bar Dasar
Progress Bar Bergaris
Progress Bar Animasi
Variasi Warna
Ukuran Progress Bar
Progress Bar dengan Label
Progress Bar Rounded
Multiple Progress Bars
Progress Bar dengan Background
Progress Bar Vertikal
Progress Bar Interaktif
Progress Bar Gradient
Progress Bar dengan Icon
Progress Bar dengan Tooltip
Progress Bar Stack
Progress Bar Custom Animation
Warna Windows