ndf-elements/src/templates/my-busy-spinner.tpl.html

My collection of useful custom elements.

<!--
  DEPRECATED.

  https://css-tricks.com/introduction-reduced-motion-media-query/,
-->
<meta name="robots" content="noindex">

<template>
  <style>
    .defaults {
      --my-spinner-duration: 1s;
    }

    @keyframes SpinnerY {
       0%   { transform: rotateY(0deg);  }
       100% { transform: rotateY(180deg); }
     }

     @keyframes SpinnerX {
       0%   { transform: rotateX(0deg);   }
       100% { transform: rotateX(180deg); }
     }

     /* Was: 'SpinnerZ' */
     @keyframes Rotate {
       0%   { transform: rotateZ(0deg);  }
       /* 12.5%{ transform: rotateZ(45deg); }
       ...
       87.5%{ transform: rotateZ(315deg); } */
       100% { transform: rotateZ(360deg); }
    }

    @keyframes AntiClockwise {
      0% { transform: rotate(360deg); }
      /* 50% { transform: rotate(180deg); } */
      100% { transform: rotate(0deg); }
    }

    .css-spinner {
      X-border: 2.5vh solid var(--my-spinner-color);
      border-color: hsl(var(--my-spinner-hue), 100%, var(--my-spinner-lightness));
      border-style: solid;
      border-width: 2.5vh;
      border-radius: 50%;
      margin: 2rem auto;
      height: var(--my-spinner-size, 40vh);
      width:  var(--my-spinner-size, 40vh);

      animation-direction: normal;
      animation-duration: var(--my-spinner-duration, 1.5s);
      animation-iteration-count: infinite;
      animation-timing-function: linear; /* << +1 ! */
      animation-play-state: running;
    }

    .css-spinner.pause {
      animation-play-state: paused;
    }

    .css-spinner.y {
      animation-name: SpinnerY;
    }

    .css-spinner.x {
      animation-name: SpinnerX;
      /* transform: rotateZ(90deg); */
    }

    /* .css-spinner.y45 {
      animation-name: SpinnerY;
      transform: rotateZ(45deg);
    } */

    .css-spinner.z,
    .css-spinner.rotate {
      animation-name: Rotate;
      background-color: #eef;
      border-bottom-color: hsl(
        var(--my-spinner-hue),
        100%,
        calc(var(--my-spinner-lightness) - var(--my-spinner-darken))
      );
      X-border-bottom-color: #006;
      border-style: outset;
    }

    .css-spinner.z.anti,
    .css-spinner.rotate.anti {
      animation-name: AntiClockwise;
      border-left-color: hsl(
        var(--my-spinner-hue),
        100%,
        calc(var(--my-spinner-lightness) - var(--my-spinner-darken))
      );
    }

    /* Applies styles when Reduced Motion is enabled *-/
    @media screen and (prefers-reduced-motion: reduce) {
      .css-spinner {
        animation-duration: var(--my-spinner-slow, 2s);
      }
    } */
  </style>

  <div class="css-spinner z XX_anti" aria-label="Loading" title="Loading"></div>
</template>

<!--<style>
  /*
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl()
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#fully_saturated_colors
    https://colordesigner.io/convert/hextohsl
    https://una.im/css-color-theming/
  */
  :root {
    --spinner-duration: 1.5s;
    --X-spinner-color: #44f; /* hsl(240, 100%, 63%) */ /* teal hsl(180, 100, 25) */
    --spinner-hue: 240deg;
    --spinner-lightness: 63%;
    --spinner-darken: 30%;
    --spinner-size: 40vh; /* Was: 12rem; */
  }

  body {
    margin: 1rem auto;
    max-width: 33rem;
  }
</style>-->