KTUIKTUI
KTUIKTUI
ComponentsDocsStore

Getting Started

IntroductionInstallationApproachThemingJavaScriptDark modeRTLReferencesChangelog

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardCheckboxCollapseDatatableDatepickerSoonDismissDrawerDropdownImage InputInputKbdLinkModalPaginationProgressRadio GroupReparentScrollableScrollspyScrolltoSelectSoonSeparatorSkeletonStepperStickySwitchTabsTextareaTheme SwitchToggleToggle GroupToggle PasswordTooltip
©2025 KtUI. All rights reserved.
A project by Keenthemes
Docs
Progress

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Examples

Basic Usage

<div class="kt-progress"><div class="kt-progress-indicator w-[50%]"></div></div>

Variants

<div class="space-y-5">
  <div class="kt-progress">
    <div class="kt-progress-indicator w-[90%]"></div>
  </div>
  <div class="kt-progress kt-progress-destructive">
    <div class="kt-progress-indicator w-[70%]"></div>
  </div>
  <div class="kt-progress kt-progress-success">
    <div class="kt-progress-indicator w-[60%]"></div>
  </div>
  <div class="kt-progress kt-progress-info">
    <div class="kt-progress-indicator w-[50%]"></div>
  </div>
  <div class="kt-progress kt-progress-warning">
    <div class="kt-progress-indicator w-[40%]"></div>
  </div>
  <div class="kt-progress kt-progress-mono">
    <div class="kt-progress-indicator w-[30%]"></div>
  </div>
</div>
PreviousePaginationNextRadio Group

On This Page

  • Examples
    • Basic Usage
    • Variants