Sid Gifari File Manager
🏠 Root
/
home2
/
meumer25
/
www
/
wp-content
/
plugins
/
astra-sites
/
inc
/
lib
/
ai-builder
/
inc
/
assets
/
src
/
components
/
Editing: dots-loader.js
import { motion } from 'framer-motion'; import { memo } from '@wordpress/element'; import { classNames } from '../helpers'; const dotVariants = { hidden: { scale: 0 }, visible: { scale: 1 }, exit: { scale: 0 }, }; const dotTransition = ( itemIndx ) => ( { duration: 0.5, repeat: Infinity, repeatType: 'reverse', delay: itemIndx * 0.2, } ); const DotsLoading = ( { className } ) => { return ( <div className="w-5 h-5 flex items-center justify-center gap-0.5"> { [ ...Array( 3 ) ].map( ( _, i ) => ( <motion.div key={ i } className={ classNames( 'w-1 h-1 bg-accent-st rounded-full !shrink-0', className ) } variants={ dotVariants } initial="hidden" animate="visible" exit="exit" transition={ dotTransition( i ) } /> ) ) } </div> ); }; export default memo( DotsLoading );
Save
Cancel
