Progress
Percentage
Information
Ensure that the width of the wrapper container is set for proper display.
Defines the percentage of progress completed.
33%
66%
99%
<script setup lang="ts">
import { NmorphProgress } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="progress-percentage-overview">
<NmorphProgress :percentage="33" color="pink" />
<NmorphProgress :percentage="66" color="var(--nmorph-accent-color)" />
<NmorphProgress :percentage="99" color="lightblue" />
</div>
</template>Type
Defines the type of progress indicator, such as linear or circle.
50%
50%
<script setup lang="ts">
import { NmorphProgress } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="progress-type-overview">
<NmorphProgress :percentage="50" color="var(--nmorph-accent-color)" />
<NmorphProgress
type="circle"
:percentage="50"
class="circle-progress"
color="pink"
/>
</div>
</template>Value Inside
Displays the progress text inside the bar if set to true.
I am slot prefix 33%
<script setup lang="ts">
import { NmorphProgress } from "@nmorph/nmorph-ui-kit";
const percentage = 33;
</script><template>
<div class="progress-value-inside-overview">
<NmorphProgress
:percentage="percentage"
value-inside
:value-right-side="false"
color="pink"
>
<template #inner-text>
<span>I am slot prefix {{ percentage }}%</span>
</template>Indeterminate
Displays the indeterminate progress animation when set to true.
<script setup lang="ts">
import { NmorphProgress } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="progress-indeterminate-overview">
<NmorphProgress
:percentage="50"
indeterminate
color="var(--nmorph-accent-color)"
:value-right-side="false"
/>
</div>
</template>Circle Size
Defines the size of the circular progress indicator.
33%
33%
33%
<script setup lang="ts">
import { NmorphProgress } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="progress-circle-size-overview">
<NmorphProgress
:percentage="33"
:circle-size="50"
type="circle"
color="var(--nmorph-accent-color)"
/>
<NmorphProgress
:percentage="33"
:circle-size="100"
type="circle"
color="var(--nmorph-error-color)"
/>
<NmorphProgress
:percentage="33"
:circle-size="120"
type="circle"
color="pink"
/>
</div>
</template>