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