t-linear-loading
This component renders a circular progress indicator. You can use it in a indeterminate state or specify a progress value.
Basic Usage
<TLinearLoading />
Color and Custom Height
<TLinearLoading color="alert" height="2" />
Rounded and Specific Value
<TLinearLoading color="danger" value="75" rounded />
Active State
Your profile
Loading your account ...
export default defineComponent({
setup() {
const active = ref(false);
const onClick = async () => {
active.value = true;
setTimeout(() => {
active.value = false;
}, 4000);
};
return () => (
<TCard
design="outlined"
prepend={() => (
<TFlex align="center" px py>
<TIconButton size="md" design="flat" color="primary" icon="mdi:refresh" onClick={onClick} me />
<TText size="re">Your profile</TText>
</TFlex>
)}
>
<TLinearLoading color="primary" active={active.value} height={2} />
<TFlex align="center" justify="center" px py>
<TText size="re">Loading your account ...</TText>
</TFlex>
</TCard>
);
},
});
Dynamic Value and Builder Slot
value: 100 / buffer: 100
export default defineComponent({
setup() {
const prog = ref(100);
const buff = ref(100);
const onClick = async () => {
// Handle progress and buffer from server
buff.value = 0;
prog.value = 100;
};
return () => (
<TCard design="outlined" p>
<TFlex align="center">
<TIconButton design="flat" size="lg" icon="mdi:refresh" onClick={onClick} me />
<TLinearLoading
color="success"
class="flex-1"
height={42}
value={prog.value}
buffer={buff.value}
builder={({ value, buffer }) => (
<TText
size="sm"
class={[
{
"text-black": value <= 50,
"text-white": value > 50,
},
]}
>
value: {value} / buffer: {buffer}
</TText>
)}
rounded
/>
</TFlex>
</TCard>
);
},
});
API
No options available