Skip to main content

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

NameTypeDefault
valuenumber

Example

References

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