Progressbar Vue Component

In addition to Preloader there is also determinate progressbar to indicate activity.

Progressbar Components

There are following components included:

  • Progressbar

Progressbar Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgstring'bg-primary'

Progressbar bg color

componentstring'span'

Component's HTML Element

progressnumber0

Determinate progress (from 0 to 1)

Examples

Progressbar.vue
<template>
<twm-page>
<twm-navbar title="Progressbar" />
<twm-block-title>Determinate Progress Bar</twm-block-title>
<twm-block strong>
<div class="my-4">
<twm-progressbar :progress="progress" />
</div>
<twm-segmented raised>
<twm-segmented-button
:active="progress === 0.1"
@click="() => (progress = 0.1)"
>
10%
</twm-segmented-button>
<twm-segmented-button
:active="progress === 0.3"
@click="() => (progress = 0.3)"
>
30%
</twm-segmented-button>
<twm-segmented-button
:active="progress === 0.5"
@click="() => (progress = 0.5)"
>
50%
</twm-segmented-button>
<twm-segmented-button
:active="progress === 1.0"
@click="() => (progress = 1.0)"
>
100%
</twm-segmented-button>
</twm-segmented>
</twm-block>
<twm-block-title>Colors</twm-block-title>
<twm-block strong class="space-y-4">
<twm-progressbar :colors="{ bg: 'bg-red-500' }" :progress="0.25" />
<twm-progressbar :colors="{ bg: 'bg-green-500' }" :progress="0.5" />
<twm-progressbar :colors="{ bg: 'bg-blue-500' }" :progress="0.75" />
<twm-progressbar :colors="{ bg: 'bg-yellow-500' }" :progress="1" />
</twm-block>
</twm-page>
</template>
<script>
import { ref } from 'vue';
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlock,
twmBlockTitle,
twmProgressbar,
twmSegmented,
twmSegmentedButton,
} from 'tailwind-mobile/vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmBlock,
twmBlockTitle,
twmProgressbar,
twmSegmented,
twmSegmentedButton,
},
setup() {
const progress = ref(0.1);
return {
progress,
};
},
};
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.