primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 4.01 kB
JavaScript
import{openBlock as e,createElementBlock as n,normalizeClass as r,normalizeStyle as t,renderSlot as i,createTextVNode as a,toDisplayString as s,createCommentVNode as o,createElementVNode as l}from"vue";var p={name:"ProgressBar",props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},computed:{containerClass(){return["p-progressbar p-component",{"p-progressbar-determinate":this.determinate,"p-progressbar-indeterminate":this.indeterminate}]},progressStyle(){return{width:this.value+"%",display:"flex"}},indeterminate(){return"indeterminate"===this.mode},determinate(){return"determinate"===this.mode}}};const d=["aria-valuenow"],m={key:0,class:"p-progressbar-label"},g={key:1,class:"p-progressbar-indeterminate-container"},u=[l("div",{class:"p-progressbar-value p-progressbar-value-animate"},null,-1)];!function(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-progressbar {\n position: relative;\n overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-value {\n height: 100%;\n width: 0%;\n position: absolute;\n display: none;\n border: 0 none;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.p-progressbar-determinate .p-progressbar-label {\n display: inline-flex;\n}\n.p-progressbar-determinate .p-progressbar-value-animate {\n transition: width 1s ease-in-out;\n}\n.p-progressbar-indeterminate .p-progressbar-value::before {\n content: '';\n position: absolute;\n background-color: inherit;\n top: 0;\n left: 0;\n bottom: 0;\n will-change: left, right;\n -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n.p-progressbar-indeterminate .p-progressbar-value::after {\n content: '';\n position: absolute;\n background-color: inherit;\n top: 0;\n left: 0;\n bottom: 0;\n will-change: left, right;\n -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n -webkit-animation-delay: 1.15s;\n animation-delay: 1.15s;\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n0% {\n left: -35%;\n right: 100%;\n}\n60% {\n left: 100%;\n right: -90%;\n}\n100% {\n left: 100%;\n right: -90%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim {\n0% {\n left: -35%;\n right: 100%;\n}\n60% {\n left: 100%;\n right: -90%;\n}\n100% {\n left: 100%;\n right: -90%;\n}\n}\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n0% {\n left: -200%;\n right: 100%;\n}\n60% {\n left: 107%;\n right: -8%;\n}\n100% {\n left: 107%;\n right: -8%;\n}\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n0% {\n left: -200%;\n right: 100%;\n}\n60% {\n left: 107%;\n right: -8%;\n}\n100% {\n left: 107%;\n right: -8%;\n}\n}\n"),p.render=function(l,p,b,f,h,c){return e(),n("div",{role:"progressbar",class:r(c.containerClass),"aria-valuemin":"0","aria-valuenow":b.value,"aria-valuemax":"100"},[c.determinate?(e(),n("div",{key:0,class:"p-progressbar-value p-progressbar-value-animate",style:t(c.progressStyle)},[null!=b.value&&0!==b.value&&b.showValue?(e(),n("div",m,[i(l.$slots,"default",{},(()=>[a(s(b.value+"%"),1)]))])):o("",!0)],4)):o("",!0),c.indeterminate?(e(),n("div",g,u)):o("",!0)],10,d)};export{p as default};