Skeleton

Набор компонентов для создания скелетов загрузки (placeholders).

Тип анимации​

Тип анимации задаётся с помощью свойства animationType.

ЗначениеОписание
shimmerБегущий градиент (по умолчанию)
pulseПульсация фона
Live Editor
Result
Open in CodeSandbox

Длительность анимации​

Свойство animationDuration позволяет регулировать скорость анимации, переопределяя длительность цикла, заданную по умолчанию. Значение указывается в миллисекундах. Значение 0 отключает анимацию.

Live Editor
Result
Open in CodeSandbox

LineSkeleton​

Быстрый старт​

Live Editor
Result
Open in CodeSandbox

RectSkeleton​

Быстрый старт​

Live Editor
Result
Open in CodeSandbox

TextSkeleton​

Быстрый старт​

Live Editor
Result
Open in CodeSandbox

withSkeleton​

HOC withSkeleton позволяет применить анимацию скелетона к любому компоненту. При skeleton={true} заменяется фоновый цвет компонента, добавляется градиент, а текст становится прозрачным.

Быстрый старт​

Live Editor
Result
Open in CodeSandbox

Тип анимации​

Тип анимации задаётся через проп animationConfig с обязательным полем type.

Live Editor
Result
Open in CodeSandbox

Длительность анимации​

Поле duration в animationConfig задаёт длительность одного цикла анимации в миллисекундах. Значение 0 отключает анимацию.

Live Editor
Result
Open in CodeSandbox

Кастомные цвета​

Поля customGradientColor (для shimmer) и customFadeInColor / customFadeOutColor (для pulse) позволяют задать произвольные цвета анимации.

Live Editor
Result
Open in CodeSandbox

Доступность​

При использовании withSkeleton необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:

import React, { useState } from 'react';
import { Button, withSkeleton } from '@salutejs/sdds-platform-ai';

const ButtonSkeleton = withSkeleton(Button);

export default function App() {
    const [skeleton, setSkeleton] = useState(false);

    return (
        <ButtonSkeleton
            type="button"
            text={skeleton ? 'Загрузка' : 'Нажмите'}
            skeleton={skeleton}
            aria-busy={skeleton}
            onClick={() => setSkeleton((prevValue) => !prevValue)}
        />
    );
}

При skeleton={true} и aria-busy={true} screen-reader оповещает пользователя о соответствующем статусе компонента.

API​

LineSkeleton​

RectSkeleton​

TextSkeleton​