spinner

2022.04.20
spinner component
#react
use client /components/post/reExport /functions/Spinner ,
  date:  ,
  tags: [ ],
  desc:  ,
  body: (
    <>
      <H>SVG spinner component</H>

      <p>Taken from <Lnk path= >https://codepen.io/supah/pen/BjYLdW</Lnk></p>

      <Code block jsx>{ >
            <circle className=  strokeWidth= ></circle>

            <style jsx>{\ };
              height: \${height ? height :  };
            }
            .spinner .path {
              stroke: \${color ? color :  };
              stroke-linecap: round;
              animation: dash 1.5s ease-in-out infinite;
            }
            @keyframes rotate {
              100% {
                transform: rotate(360deg);
              }
            }
            @keyframes dash {
              0% {
                stroke-dasharray: 1, 150;
                stroke-dashoffset: 0;
              }
              50% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -35;
              }
              100% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -124;
              }
            }
            \ }</Code>

      <H>With props and default</H>

      <Code block jsx>{ />  
      <Spinner/>
      