primereact/progressspinner/progressspinner.esm.min.js

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

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