ymaps3-spinner package

Yandex JS API package

How use

The package is located in the dist folder:

• dist/types TypeScript types
• dist/esm es6 modules for direct connection in your project
• dist/index.js Yandex JS Module

Recommended use ymaps3-spinner as usual npm package:

npm install @yandex/ymaps3-spinner

You also need to import css styles into your project:

/* index.css */
@import '@yandex/ymaps3-minimap/dist/esm/index.css';

main();
async function main() {
  await ymaps3.ready;
  const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapControls} = ymaps3;

  const {YMapSpinner} = await import('@yandex/ymaps3-spinner');

  map = new YMap(document.getElementById('app'), {location: LOCATION});

  map.addChild(new YMapDefaultSchemeLayer({}));
  map.addChild(new YMapDefaultFeaturesLayer({}));

  const spinnerControl = new YMapControls({position: 'left'});
  const spinner = new YMapSpinner(spinnerProps);
  spinnerControl.addChild(spinner);

  map.addChild(spinnerControl);
}

Usage without npm

You can use CDN with module loading handler in JS API on your page.

By default ymaps3.import can load self modules. If you want also load your package, should register cdn:

ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', '@yandex/ymaps3-spinner@latest');

Just use ymaps3.import:

await ymaps3.ready;
const {YMapSpinner} = await ymaps3.import('@yandex/ymaps3-spinner');

YMapSpinnerProps

| Name | Type | Default | Description | | :-------- | :---------------- | :-------------------------- | :------------------------------------- | | lines | number | 12 | The number of lines to draw | | length | number | 7 | The length of each line | | width | number | 5 | The line thickness | | radius | number | 10 | The radius of the inner circle | | scale | number | 1.0 | Scales overall size of the spinner | | corners | number | 1 | Corner roundness (0..1) | | speed | number | 1 | Rounds per second | | rotate | number | 0 | The rotation offset | | animation | string | 'spinner-line-fade-default' | The CSS animation name for the lines | | direction | number | 1 | 1: clockwise, -1: counterclockwise | | color | string / string[] | '#000' | CSS color or array of colors | | fadeColor | string / string[] | 'transparent' | CSS color or array of colors | | top | string | '50%' | Top position relative to parent | | left | string | '50%' | Left position relative to parent | | shadow | string | '0 0 1px transparent' | Box-shadow for the lines | | zIndex | number | 9 | The z-index (defaults to 2e9) | | className | string | 'spinner' | The CSS class to assign to the spinner | | position | string | 'absolute' | Element positioning |