Linear Progress API Reference

Props

Prop	Type	Default	Description
absolute	Boolean	false	Positions the bar absolutely at the top of its container.
variant	String	'default'	Applies a themed style (e.g. default, success).
height	Number	4	Height of the track in pixels.
indeterminate	Boolean	false	Shows the looping loading animation instead of a percentage width.
modelValue	Number	0	Current value used to calculate the filled width (use with v-model).
max	Number	100	Maximum value used to derive the percentage width.
rounded	Boolean	false	Rounds both the track and the indicator for pill-shaped bars.

Events

The component doesn't emit any events.

Slots

The component doesn't provide any slots.

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OLinearProgress v-model="progress" />
</template>

<script setup>
import { ref } from "vue";
import { OLinearProgress } from "your-component-library";

const progress = ref(75);
</script>

Indeterminate Loading

<template>
  <OLinearProgress indeterminate variant="success" />
</template>

<script setup>
import { OLinearProgress } from "your-component-library";
</script>

Custom Height & Rounded Track

<template>
  <OLinearProgress
    v-model="progress"
    :height="8"
    rounded
  />
</template>

<script setup>
import { ref } from "vue";
import { OLinearProgress } from "your-component-library";

const progress = ref(60);
</script>

With Custom Max Value

<template>
  <OLinearProgress v-model="progress" :max="200" variant="success" />
</template>

<script setup>
import { ref } from "vue";
import { OLinearProgress } from "your-component-library";

const progress = ref(150);
</script>

Absolute Positioning

<template>
  <div class="container">
    <OLinearProgress v-model="progress" absolute />
    <!-- Other content -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import { OLinearProgress } from "your-component-library";

const progress = ref(75);
</script>

<style>
.container {
  position: relative;
  min-height: 100px;
}
</style>