/
gsam
/
ui-kit-ce
Обзор
Документация
Войти
/
gsam
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/loading-button/examples/LoadingTitle.tsx
68 строк
1 KB
Калиниченко Никита Артемович
feat(loading-button): добавлена возможность контроллировать уровень состояния загрузки
26 мар 2025, 16:51
26 мар 2025, 16:51
152b206
Код
Авторство
О чём код?
import * as React from 'react' import { createUseStyles, LoadingButton } from '@v-uik/base' const useStyles = createUseStyles({ loading: { display: 'inline-block', }, '@keyframes blink': { '0%': { opacity: 1, }, '50%': { opacity: 0, }, '100%': { opacity: 1, }, }, dot1: { animation: '$blink 1s infinite', animationDelay: '0ms', }, dot2: { animation: '$blink 1s infinite', animationDelay: '300ms', }, dot3: { animation: '$blink 1s infinite', animationDelay: '600ms', }, }) export const Title = (): JSX.Element => { const classes = useStyles() const dots = ['.', '.', '.'] return ( <div> Loading {dots.map((dot, index) => ( <span key={index} className={`${classes.loading} ${ classes[`dot${index + 1}` as keyof typeof classes] }`} > {dot} </span> ))} </div> ) } export const LoadingTitle = (): JSX.Element => { return ( <div style={{ display: 'flex', columnGap: 16, alignItems: 'center' }}> <LoadingButton isLoading loadingTitle="In Progress..."> Button </LoadingButton> <LoadingButton isLoading hideLoaderPrefix loadingTitle={<Title />} style={{ width: 140 }} /> </div> ) }