Mahyar Khanbolooki
22 lines
540 B
TypeScript
22 lines
540 B
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion'
|
|
import React from 'react'
|
|
|
|
type Props = {
|
|
percentage: number | string
|
|
}
|
|
|
|
function AnimatedBar({ percentage }: Props) {
|
|
return (
|
|
<span className='relative w-full h-1 place-self-center bg-border rounded-full'>
|
|
<motion.span
|
|
animate={{ width: [0, `${percentage}%`] }}
|
|
className='absolute top-0 left-0 w-[10%] h-1 bg-primary rounded-full'
|
|
>
|
|
</motion.span>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default AnimatedBar |