t-loading

This component renders a circular progress indicator. You can use it in a indeterminate state or specify a progress value.

Basic Usage

<TLoading />

Size

<TLoading color="success" dimensions={54} width={2} />

Specific Value

<TLoading color="alert" value={75} />

Dynamic Value

100

export const Dynamic = defineComponent({
  setup() {
    const progress = ref(100);

    const onClick = async () => {
      //  Handle progress and buffer from server
      progress.value = 0;
    };

    return () => (
      <TCard design="outlined" p>
        <TFlex align="center">
          <TIconButton size="lg" icon="mdi:refresh" onClick={onClick} me />
          <TLoading color="primary" value={progress.value} width={5} dimensions={84}>
            <TText>{progress.value}</TText>
          </TLoading>
        </TFlex>
      </TCard>
    );
  },
});

API

No options available

Components

t-link

Components

t-pagination

Table of Contents