ProgressIndicatorPrimitive

Unstyled fill element of a progress bar; must sit inside ProgressRootPrimitive, which you size and position yourself.

import ProgressIndicatorPrimitive from "@wikicasa-dev/components/UIKit/ProgressBar/ProgressIndicatorPrimitive";

The fill of a progress bar built with ProgressRootPrimitive. It is an unstyled <div> that mirrors the root's state as data-state (indeterminate, loading, complete), data-value and data-max. It does not move by itself: set its transform or width from the value. See ProgressRootPrimitive for the full progress bar recipe.

#Usage

<script setup lang="ts">
import ProgressRootPrimitive from "@wikicasa-dev/components/UIKit/ProgressBar/ProgressRootPrimitive";
import ProgressIndicatorPrimitive from "@wikicasa-dev/components/UIKit/ProgressBar/ProgressIndicatorPrimitive";

const uploaded = 60; // % of photos uploaded
</script>

<template>
  <ProgressRootPrimitive :model-value="uploaded" style="height: 4px; overflow: hidden; background: #e9effe">
    <ProgressIndicatorPrimitive :style="{ height: '100%', width: `${uploaded}%`, background: '#2b5dff' }" />
  </ProgressRootPrimitive>
</template>

#Do / Don't

• Do render it only inside ProgressRootPrimitive; it reads the value from there and fails outside it.
• Do drive its size/position from the same value you pass to the root.
• Use as to render it as another element if needed.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
asChild	boolean			Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as	AsTag | Component			The element or component this component should render as. Can be overwritten by asChild.

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

None.