primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 3.34 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.progressspinner=function(e,n,r,s,t,i){"use strict";function o(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var a=o(n),p=s.ComponentBase.extend({defaultProps:{__TYPE:"ProgressSpinner",id:null,style:null,className:null,strokeWidth:"2",fill:"none",animationDuration:"2s",children:void 0},css:{classes:{root:"p-progress-spinner",spinner:"p-progress-spinner-svg",circle:"p-progress-spinner-circle"},styles:"\n@layer primereact {\n .p-progress-spinner {\n position: relative;\n margin: 0 auto;\n width: 100px;\n height: 100px;\n display: inline-block;\n }\n \n .p-progress-spinner::before {\n content: '';\n display: block;\n padding-top: 100%;\n }\n \n .p-progress-spinner-svg {\n animation: p-progress-spinner-rotate 2s linear infinite;\n height: 100%;\n transform-origin: center center;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n }\n \n .p-progress-spinner-circle {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: 0;\n stroke: #d62d20;\n animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;\n stroke-linecap: round;\n }\n}\n\n@keyframes p-progress-spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes p-progress-spinner-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n\n@keyframes p-progress-spinner-color {\n 100%,\n 0% {\n stroke: #d62d20;\n }\n 40% {\n stroke: #0057e7;\n }\n 66% {\n stroke: #008744;\n }\n 80%,\n 90% {\n stroke: #ffa700;\n }\n}\n",inlineStyles:{spinner:function(e){return{animationDuration:e.props.animationDuration}}}}}),l=a.memo(a.forwardRef((function(e,n){var o=t.useMergeProps(),l=a.useContext(r.PrimeReactContext),c=p.getProps(e,l),u=a.useRef(null),d=p.setMetaData({props:c}),f=d.ptm,m=d.cx,g=d.sx;s.useHandleStyle(p.css.styles,d.isUnstyled,{name:"progressspinner"}),a.useImperativeHandle(n,(function(){return{props:c,getElement:function(){return u.current}}}));var h=o({id:c.id,ref:u,style:c.style,className:i.classNames(c.className,m("root")),role:"progressbar","aria-busy":!0},p.getOtherProps(c),f("root")),y=o({className:m("spinner"),viewBox:"25 25 50 50",style:g("spinner")},f("spinner")),k=o({className:m("circle"),cx:"50",cy:"50",r:"20",fill:c.fill,strokeWidth:c.strokeWidth,strokeMiterlimit:"10"},f("circle"));return a.createElement("div",h,a.createElement("svg",y,a.createElement("circle",k)))})));return l.displayName="ProgressSpinner",e.ProgressSpinner=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);