react-loader-spinner/dist/audio.mjs

react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.

import u from'styled-components';import {jsx,jsxs}from'react/jsx-runtime';var i="#4fa94d",r={"aria-busy":true,role:"progressbar"};var a=u.div`
  display: ${t=>t.$visible?"flex":"none"};
`;var o="http://www.w3.org/2000/svg";var x=({height:t="100",width:s="100",color:l=i,ariaLabel:p="audio-loading",wrapperStyle:d={},wrapperClass:g,visible:m=true})=>jsx(a,{$visible:m,style:{...d},className:g,"data-testid":"audio-loading","aria-label":p,...r,children:jsxs("svg",{height:`${t}`,width:`${s}`,fill:l,viewBox:"0 0 55 80",xmlns:o,"data-testid":"audio-svg",children:[jsx("title",{children:"Audio Visualization"}),jsx("desc",{children:"Animated representation of audio data"}),jsxs("g",{transform:"matrix(1 0 0 -1 0 80)",children:[jsx("rect",{width:"10",height:"20",rx:"3",children:jsx("animate",{attributeName:"height",begin:"0s",dur:"4.3s",values:"20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20",calcMode:"linear",repeatCount:"indefinite"})}),jsx("rect",{x:"15",width:"10",height:"80",rx:"3",children:jsx("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"80;55;33;5;75;23;73;33;12;14;60;80",calcMode:"linear",repeatCount:"indefinite"})}),jsx("rect",{x:"30",width:"10",height:"50",rx:"3",children:jsx("animate",{attributeName:"height",begin:"0s",dur:"1.4s",values:"50;34;78;23;56;23;34;76;80;54;21;50",calcMode:"linear",repeatCount:"indefinite"})}),jsx("rect",{x:"45",width:"10",height:"30",rx:"3",children:jsx("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"30;45;13;80;56;72;45;76;34;23;67;30",calcMode:"linear",repeatCount:"indefinite"})})]})]})});
export{x as Audio};//# sourceMappingURL=audio.mjs.map
//# sourceMappingURL=audio.mjs.map