Spinning Loader

Installation

  yarn add @chewy/kib-overlays-styles

Import

  @use '~@chewy/kib-overlays-styles/src/kib-spinning-loader/styles' as kib-spinning-loader;

Mixins

container

@mixin container() { ... }@mixin container() { 
  @include common.backdrop(settings.$container-background);

  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(0.1rem);
 }
Description

Generates the styles for the component container

Parameters

None.

Requires

container-emphasis

@mixin container-emphasis() { ... }@mixin container-emphasis() { 
  background-color: settings.$emphasis-container-background;
 }
Description

Generates emphasis styles for the component container

Parameters

None.

container-embedded

@mixin container-embedded() { ... }@mixin container-embedded() { 
  position: absolute;
 }
Description

Generates emphasis styles for the component container

Parameters

None.

spinner

@mixin spinner() { ... }@mixin spinner() { 
  color: settings.$spinner-color;
 }
Description

Generates styles for the spinner component

Parameters

None.

Requires

Variables

container-background

$container-background: color.get('ui-bg', 'overlay', '02') !default;
Description

Container background color

Type

Color

Used by

emphasis-container-background

$emphasis-container-background: color.get('ui-bg', 'overlay', '02') !default;
Description

Container background color with emphasis

Type

Color

Used by

spinner-color

$spinner-color: color.get('link', 'active', 'primary') !default;
Description

Spinner color

Type

Color

Used by