Loading ProgressBar

A loading ProgressBar styled with Tailwind CSS.

Example#

import {Label, ProgressBar} from 'react-aria-components';

<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-12 rounded-lg flex justify-center">
  <ProgressBar value={30} className="flex flex-col gap-3 w-56 text-white">
    {({ percentage, valueText }) => (
      <>
        <div className="flex">
          <Label className="flex-1">Loading…</Label>
          <span>{valueText}</span>
        </div>
        <div className="h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40">
          <div
            className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white"
            style={{ width: percentage + '%' }}
          />
        </div>
      </>
    )}
  </ProgressBar>
</div>

import {Label, ProgressBar} from 'react-aria-components';

<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-12 rounded-lg flex justify-center">
  <ProgressBar
    value={30}
    className="flex flex-col gap-3 w-56 text-white"
  >
    {({ percentage, valueText }) => (
      <>
        <div className="flex">
          <Label className="flex-1">Loading…</Label>
          <span>{valueText}</span>
        </div>
        <div className="h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40">
          <div
            className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white"
            style={{ width: percentage + '%' }}
          />
        </div>
      </>
    )}
  </ProgressBar>
</div>

import {
  Label,
  ProgressBar
} from 'react-aria-components';

<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-12 rounded-lg flex justify-center">
  <ProgressBar
    value={30}
    className="flex flex-col gap-3 w-56 text-white"
  >
    {(
      {
        percentage,
        valueText
      }
    ) => (
      <>
        <div className="flex">
          <Label className="flex-1">
            Loading…
          </Label>
          <span>
            {valueText}
          </span>
        </div>
        <div className="h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40">
          <div
            className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white"
            style={{
              width:
                percentage +
                '%'
            }}
          />
        </div>
      </>
    )}
  </ProgressBar>
</div>

Tailwind config#

This example uses the tailwindcss-react-aria-components plugin. Add it to your tailwind.config.js:

module.exports = {
  // ...
  plugins: [
    require('tailwindcss-react-aria-components')
  ]
};

module.exports = {
  // ...
  plugins: [
    require('tailwindcss-react-aria-components')
  ]
};

module.exports = {
  // ...
  plugins: [
    require(
      'tailwindcss-react-aria-components'
    )
  ]
};

Components#