Progress

The Progress component displays a loading bar.

Examples

Color

The Progress component displays a colored loading bar.

Code

<script setup lang="ts">
import { BaseProgress } from '@point-hub/papp'
import { ref } from 'vue'

const value1 = ref(50)
const value2 = ref(60)
const value3 = ref(70)
const value4 = ref(80)
const value5 = ref(90)
const value6 = ref(100)
</script>

<template>
  <div>
    <component :is="BaseProgress" v-model="value1" color="primary" />
    <component :is="BaseProgress" v-model="value2" color="secondary" />
    <component :is="BaseProgress" v-model="value3" color="info" />
    <component :is="BaseProgress" v-model="value4" color="success" />
    <component :is="BaseProgress" v-model="value5" color="warning" />
    <component :is="BaseProgress" v-model="value6" color="danger" />
  </div>
</template>

Size

The Progress components can have various sizes.

Code

<script setup lang="ts">
import { BaseProgress } from '@point-hub/papp'
import { ref } from 'vue'

const value1 = ref(50)
const value2 = ref(60)
const value3 = ref(70)
const value4 = ref(80)
const value5 = ref(90)
const value6 = ref(100)
</script>

<template>
  <Demo>
    <component :is="BaseProgress" v-model="value1" size="xs" />
    <component :is="BaseProgress" v-model="value2" size="sm" />
    <component :is="BaseProgress" v-model="value3" size="md" />
    <component :is="BaseProgress" v-model="value4" size="lg" />
    <component :is="BaseProgress" v-model="value5" size="xl" />
    <component :is="BaseProgress" v-model="value6" size="2xl" />
  </Demo>
</template>

Indeterminate

You can use indeterminate mode for the progress bar when you do not know how long an operation will take.

Code

<script setup lang="ts">
import { BaseProgress } from '@point-hub/papp'
import { ref } from 'vue'

const value1 = ref(50)
const value2 = ref(60)
const value3 = ref(70)
const value4 = ref(80)
const value5 = ref(90)
const value6 = ref(100)
</script>

<template>
  <div>
    <component :is="BaseProgress" v-model="value1" is-indeterminate color="primary" />
    <component :is="BaseProgress" v-model="value2" is-indeterminate color="secondary" />
    <component :is="BaseProgress" v-model="value3" is-indeterminate color="info" />
    <component :is="BaseProgress" v-model="value4" is-indeterminate color="success" />
    <component :is="BaseProgress" v-model="value5" is-indeterminate color="warning" />
    <component :is="BaseProgress" v-model="value6" is-indeterminate color="danger" />
  </div>
</template>

Label

The Progress component displays a label.

Code

<script setup lang="ts">
import { BaseProgress } from '@point-hub/papp'
import { ref } from 'vue'

const value1 = ref(20)
const value2 = ref(50)
const value3 = ref(100)
</script>

<template>
  <div>
    <component :is="BaseProgress" v-model="value1" color="danger" size="lg">
      <p>{{ value1 }}%</p>
    </component>
    <component :is="BaseProgress" v-model="value1" color="danger" size="lg">
      <p>{{ value1 }}%</p>
      <p>progress-lg</p>
    </component>
    <component :is="BaseProgress" v-model="value2" color="warning" size="xl">
      <p>{{ value2 }}%</p>
    </component>
    <component :is="BaseProgress" v-model="value2" color="warning" size="xl">
      <p>{{ value2 }}%</p>
      <p>progress-xl</p>
    </component>
    <component :is="BaseProgress" v-model="value3" color="success" size="2xl">
      <p>{{ value3 }}%</p>
    </component>
    <component :is="BaseProgress" v-model="value3" color="success" size="2xl">
      <p>{{ value3 }}%</p>
      <p>progress-2xl</p>
    </component>
  </div>
</template>

Progress API

Types

export type BaseProgressColorType =
  | 'primary'
  | 'secondary'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'

export type BaseProgressSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

Props

Name	Type	Default	Description
color	BaseProgressColorType	primary	Progress color.
size	BaseProgressSizeType	md	Progress size.
isInderterminate	boolean	false	Infinite loading animation.

Slot

#default slot for rendering label