Почему не работают JSS стили Loader?

Question

[Дмитрий Ярощук]

Не срабатывают JSS стили Loader

export default function Loader(props) {
    const {loader} = props;
    const classes = useStyles(props);
    return (
        <>
            {
                loader ? <div className={`${classes.loader} js--loader`}>
                    <div className={classes.bar1}></div>
                    <div className={classes.bar2}></div>
                    <div className={classes.bar3}></div>
                    <div className={classes.bar4}></div>
                    <div className={classes.bar5}></div>
                    <div className={classes.bar6}></div>
                    <div className={classes.bar7}></div>
                    <div className={classes.bar8}></div>
                    <div className={classes.bar9}></div>
                    <div className={classes.bar10}></div>
                    <div className={classes.bar11}></div>
                    <div className={classes.bar12}></div>
                </div> : undefined
            }
        </>
    )
}

const useStyles = createUseStyles({
    loader: {
        // display: 'none',
        background: 'darkgreen',
        position: 'relative',
        width: '54px',
        height: '54px',
        borderRadius: '10px',
        margin: '0 auto',
    },
    bar: {
        width: '8%',
        height: '24%',
        background: 'rgb(128, 128, 128)',
        position: 'absolute',
        left: '50%',
        top: '30%',
        opacity: 0,
        borderRadius: '50px',
        boxShadow: '0 0 3px rgba(0,0,0,0.2)',
        animation: '$fade458 1s linear infinite',
    },
    '@keyframes fade458': {
        from: {
            opacity: 1,
        },
        to: {
            opacity: 0.25,
        },
    },
    bar1: {
        transform: 'rotate(0deg) translate(0, -130%)',
        animationDelay: '0s',
    },
    bar2: {
        transform: 'rotate(30deg) translate(0, -130%)',
        animationDelay: '-1.1s',
    },
    bar3: {
        transform: 'rotate(60deg) translate(0, -130%)',
        animationDelay: '-1s',
    },
    bar4: {
        transform: 'rotate(90deg) translate(0, -130%)',
        animationDelay: '-0.9s',
    },
    bar5: {
        transform: 'rotate(120deg) translate(0, -130%)',
        animationDelay: '-0.8s',
    },
    bar6: {
        transform: 'rotate(150deg) translate(0, -130%)',
        animationDelay: '-0.7s',
    },
    bar7: {
        transform: 'rotate(180deg) translate(0, -130%)',
        animationDelay: '-0.6s',
    },
    bar8: {
        transform: 'rotate(210deg) translate(0, -130%)',
        animationDelay: '-0.5s',
    },
    bar9: {
        transform: 'rotate(240deg) translate(0, -130%)',
        animationDelay: '-0.4s',
    },
    bar10: {
        transform: 'rotate(270deg) translate(0, -130%)',
        animationDelay: '-0.3s',
    },
    bar11: {
        transform: 'rotate(300deg) translate(0, -130%)',
        animationDelay: '-0.2s',
    },
    bar12: {
        transform: 'rotate(330deg) translate(0, -130%)',
        animationDelay: '-0.1s',
    },
});
export default useStyles;

Answer 1

[Александр]

А вы и не присваиваете classes.bar для элементов. А чтобы не городить такое `${classes.loader} js--loader` можно использовать clsx или classnames.

Comments

[Дмитрий Ярощук]

Александр подскажите а почему они не присваиваются ?

[Александр]

Дмитрий Ярощук, А почему должны? Вы же сами указываете какие применить. Для каждого надо и classes.bar и classes.barN.

Answer 2

[0xD34F]

Как может работать то, что вы не используете?

<div className={classes.bar1}></div>

Класс bar1 есть, это хорошо. А почему нет bar? Плохо.

UPD. Ну и в целом многословно как-то. Зачем копипастить по двенадцать раз одно и то же? В createUseStyles заменяем все barN на

...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [
  `bar${i + 1}`,
  {
    transform: `rotate(${i * 30}deg) translate(0, -130%)`,
    animationDelay: `${i * 0.1 - 1.2}s`,
  },
])),

А в компоненте Loader пусть будет так:

<div className={`${classes.loader} js--loader`}>
  {Array.from(
    { length: 12 },
    (_, i) => <div className={`${classes.bar} ${classes[`bar${i + 1}`]}`}></div>
  )}
</div>