YMapSpinner

Класс YMapSpinner является визуальным компонентом для отображения анимированного индикатора загрузки (спиннер) на карте.

Основные характеристики:

Представляет собой вращающийся индикатор.
Может иметь различные стили анимации.
Можно настроить различные параметры отображения на карте.

Примечание

Данный класс является компонентом пакета @yandex/ymaps3-spinner и предоставляет дополнительную функциональность в JS API, которая не входит в основное API.

Для подключения пакета воспользуйтесь инструкцией.

Пример использования

vanilla

react

vue

const spinnerControl = new YMapControls({position: 'left'});
const spinner = new YMapSpinner({
  lines: 12,
  length: 7,
  width: 5,
  radius: 10,
  color: '#000',
  speed: 1,
  direction: 1,
  animation: 'spinner-line-fade-default'
});
spinnerControl.addChild(spinner);
map.addChild(spinnerControl);

<YMapControls position= "left">
  <YMapSpinner
    lines={12}
    length={7}
    width={5}
    radius={10}
    color="#000"
    speed={1}
    direction={1}
    animation="spinner-line-fade-default"
  />
</YMapControls>

<YMapControls :position= "left">
  <YMapSpinner
    :lines="12"
    :length="7"
    :width="5"
    :radius="10"
    :color="#000"
    :speed="1"
    :direction="1"
    :animation="spinner-line-fade-default"
  />
</YMapControls>

Подробный пример

Props

export interface YMapSpinnerProps {
    lines: number;
    length: number;
    width: number;
    radius: number;
    scale: number;
    corners: number;
    speed: number;
    rotate: number;
    animation: string;
    direction: number;
    color: string | string[];
    fadeColor: string | string[];
    top: string;
    left: string;
    shadow: string;
    zIndex: number;
    className: string;
    position: string;
}

Параметры

Параметр	Тип	Значение по умолчанию	Описание
`lines`	`number`	12	Количество линий для рисования.
`length`	`number`	7	Длина каждой линии.
`width`	`number`	5	Толщина линии.
`radius`	`number`	10	Радиус внутреннего круга.
`scale`	`number`	1.0	Общий размер шкалы спиннера.
`corners`	`number`	1	Округлость угла (0..1).
`speed`	`number`	1	Количество пройденных кругов в секунду.
`rotate`	`number`	0	Смещение вращения.
`animation`	`string`	'spinner-line-fade-default'	Название CSS-анимации для линий.
`direction`	`number`	1	1: по часовой стрелке, -1: против часовой стрелки.
`color`	`string / string[]`	'#000'	CSS цвет или массив цветов.
`fadeColor`	`string / string[]`	'transparent'	CSS цвет или массив цветов.
`top`	`string`	'50%'	Верхнее положение относительно родительского элемента.
`left`	`string`	'50%'	Левое положение относительно родительского элемента.
`shadow`	`string`	'0 0 1px transparent'	Прямоугольная тень для линий.
`zIndex`	`number`	9	Z-индекс.
`className`	`string`	'spinner'	Класс CSS, назначаемый спиннеру.
`position`	`string`	'absolute'	Позиционирование элемента.