Frontile
GitHub

ProgressBar

ProgressBars shows visually the progression of a process or task

Import

import { ProgressBar } from '@frontile/status';

Usage

50% 
import { ProgressBar } from '@frontile/status';

<template>
  <ProgressBar @progress={{50}} @label='Progress' />
</template>

ProgressBar Intents

import { ProgressBar } from '@frontile/status';

<template>
  <div class='grid grid-cols-5 gap-4'>
    <ProgressBar @progress={{50}} @label='Default' @showValueLabel={{false}} />
    <ProgressBar
      @progress={{50}}
      @label='Primary'
      @intent='primary'
      @showValueLabel={{false}}
    />
    <ProgressBar
      @progress={{50}}
      @label='Success'
      @intent='success'
      @showValueLabel={{false}}
    />
    <ProgressBar
      @progress={{50}}
      @label='Warning'
      @intent='warning'
      @showValueLabel={{false}}
    />
    <ProgressBar
      @progress={{50}}
      @label='Danger'
      @intent='danger'
      @showValueLabel={{false}}
    />
  </div>
</template>

ProgressBar Sizes

import { ProgressBar } from '@frontile/status';

<template>
  <div class='mt-6 grid grid-cols-4 gap-4 items-center'>
    <ProgressBar
      @progress={{50}}
      @size='xs'
      @label='XSmall'
      @showValueLabel={{false}}
    />
    <ProgressBar
      @progress={{50}}
      @size='sm'
      @label='Small'
      @showValueLabel={{false}}
    />
    <ProgressBar @progress={{50}} @label='Normal' @showValueLabel={{false}} />
    <ProgressBar
      @progress={{50}}
      @size='lg'
      @label='Large'
      @showValueLabel={{false}}
    />
  </div>
</template>

ProgressBar Radius

import { ProgressBar } from '@frontile/status';

<template>
  <div class='mt-6 grid grid-cols-4 gap-4'>
    <ProgressBar
      @size='lg'
      @progress={{50}}
      @radius='none'
      @label='None'
      @showValueLabel={{false}}
    />
    <ProgressBar
      @size='lg'
      @progress={{50}}
      @radius='sm'
      @label='Small'
      @showValueLabel={{false}}
    />
    <ProgressBar
      @size='lg'
      @progress={{50}}
      @radius='lg'
      @label='Large'
      @showValueLabel={{false}}
    />
    <ProgressBar
      @size='lg'
      @progress={{50}}
      @radius='full'
      @label='Full'
      @showValueLabel={{false}}
    />
  </div>
</template>

ProgressBar Labels

50%
4 out of 8