@ppci/custom-loader/style.js

A custom loader

import { css } from 'lit-element';
import { primary } from '@ppci/styles';

/* Styles */

export default css`
  :host {
    --stroke-color: ${primary.var};
    --size: 10.5rem;
  }

  :host .loader {
    animation-name: rotate;
    animation-duration: .69s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    width: var(--size);
    height: var(--size);
  }

  :host .loader-svg {
    fill: transparent;
  }

  :host .loader svg circle {
    animation-name: init-stroke;
    animation-duration: 10ms;
    animation-timing-function: cubic-bezier(.2,0,.38,.9);
  }

  :host .loader-svg circle {
    stroke-width: 8;
    stroke-linecap: butt;
    stroke-dasharray: 240;
  }

  :host .loader-stroke {
    stroke: var(--stroke-color);
    stroke-dashoffset: 40;
  }
`;