Progress

Code

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      keyframes: {
        slide: {
          '0%': {
            backgroundPosition: '0 0'
          },
          '100%': {
            backgroundPosition: '60px 0'
          }
        }
      },
      animation: {
        slide: 'slide 2s linear infinite'
      }
    }
  }
}

components/Progress/index.tsx

import type { FC } from 'react'

interface Props {
  value: number
}

const Progress: FC<Props> = ({ value }) => {
  return (
    <div className="border rounded-full h-3">
      <div
        className="h-full bg-sky-400 rounded-full animate-slide bg-[length:30px_30px]"
        style={{
          backgroundImage:
            'linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)',
          width: `${value > 100 ? 100 : value}%`
        }}
      />
    </div>
  )
}

export default Progress

Props

Name	Type	Default
value	number

Example

References

https://codepen.io/restlessdesign/pen/AGGBOB