primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 4.39 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.progressbar=function(e,n,r){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(e),i=n.useStyle("\n.p-progressbar {\n position: relative;\n overflow: hidden;\n}\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\n.p-progressbar-determinate .p-progressbar-label {\n display: inline-flex;\n}\n\n.p-progressbar-determinate .p-progressbar-value-animate {\n transition: width 1s ease-in-out;\n}\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\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\n@-webkit-keyframes p-progressbar-indeterminate-anim {\n 0% {\n left: -35%;\n right: 100%;\n }\n 60% {\n left: 100%;\n right: -90%;\n }\n 100% {\n left: 100%;\n right: -90%;\n }\n}\n@keyframes p-progressbar-indeterminate-anim {\n 0% {\n left: -35%;\n right: 100%;\n }\n 60% {\n left: 100%;\n right: -90%;\n }\n 100% {\n left: 100%;\n right: -90%;\n }\n}\n\n@-webkit-keyframes p-progressbar-indeterminate-anim-short {\n 0% {\n left: -200%;\n right: 100%;\n }\n 60% {\n left: 107%;\n right: -8%;\n }\n 100% {\n left: 107%;\n right: -8%;\n }\n}\n@keyframes p-progressbar-indeterminate-anim-short {\n 0% {\n left: -200%;\n right: 100%;\n }\n 60% {\n left: 107%;\n right: -8%;\n }\n 100% {\n left: 107%;\n right: -8%;\n }\n}\n",{name:"progressbar",manual:!0}),o={name:"ProgressBar",extends:{name:"BaseProgressBar",extends:a.default,props:{value:{type:Number,default:null},mode:{type:String,default:"determinate"},showValue:{type:Boolean,default:!0}},css:{classes:{root:function(e){var n=e.instance;return["p-progressbar p-component",{"p-progressbar-determinate":n.determinate,"p-progressbar-indeterminate":n.indeterminate}]},container:"p-progressbar-indeterminate-container",value:"p-progressbar-value p-progressbar-value-animate",label:"p-progressbar-label"},loadStyle:i.load},provide:function(){return{$parentInstance:this}}},computed:{progressStyle:function(){return{width:this.value+"%",display:"flex"}},indeterminate:function(){return"indeterminate"===this.mode},determinate:function(){return"determinate"===this.mode}}},s=["aria-valuenow"];return o.render=function(e,n,t,a,i,o){return r.openBlock(),r.createElementBlock("div",r.mergeProps({role:"progressbar",class:e.cx("root"),"aria-valuemin":"0","aria-valuenow":e.value,"aria-valuemax":"100"},e.ptm("root")),[o.determinate?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,class:e.cx("value"),style:o.progressStyle},e.ptm("value")),[null!=e.value&&0!==e.value&&e.showValue?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,class:e.cx("label")},e.ptm("label")),[r.renderSlot(e.$slots,"default",{},(function(){return[r.createTextVNode(r.toDisplayString(e.value+"%"),1)]}))],16)):r.createCommentVNode("",!0)],16)):r.createCommentVNode("",!0),o.indeterminate?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:1,class:e.cx("container")},e.ptm("container")),[r.createElementVNode("div",r.mergeProps({class:e.cx("value")},e.ptm("value")),null,16)],16)):r.createCommentVNode("",!0)],16,s)},o}(primevue.basecomponent,primevue.usestyle,Vue);