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.32 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),r=require("primereact/componentbase"),s=require("primereact/hooks"),t=require("primereact/utils");function i(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 o=i(e),a=r.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}}}}}),p=o.memo(o.forwardRef((function(e,i){var p=s.useMergeProps(),l=o.useContext(n.PrimeReactContext),c=a.getProps(e,l),u=o.useRef(null),d=a.setMetaData({props:c}),f=d.ptm,m=d.cx,g=d.sx;r.useHandleStyle(a.css.styles,d.isUnstyled,{name:"progressspinner"}),o.useImperativeHandle(i,(function(){return{props:c,getElement:function(){return u.current}}}));var y=p({id:c.id,ref:u,style:c.style,className:t.classNames(c.className,m("root")),role:"progressbar","aria-busy":!0},a.getOtherProps(c),f("root")),k=p({className:m("spinner"),viewBox:"25 25 50 50",style:g("spinner")},f("spinner")),h=p({className:m("circle"),cx:"50",cy:"50",r:"20",fill:c.fill,strokeWidth:c.strokeWidth,strokeMiterlimit:"10"},f("circle"));return o.createElement("div",y,o.createElement("svg",k,o.createElement("circle",h)))})));p.displayName="ProgressSpinner",exports.ProgressSpinner=p;