vue-content-loader/dist/vue-content-loader.umd.min.js

SVG component to create placeholder loading, like Facebook cards loading.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).contentLoaders={},e.vue)}(this,(function(e,t){"use strict";var r=function(){return Math.random().toString(36).substring(2)},i=t.defineComponent({name:"ContentLoader",props:{width:{type:[Number,String]},height:{type:[Number,String]},viewBox:{type:String},preserveAspectRatio:{type:String,default:"xMidYMid meet"},speed:{type:Number,default:2},baseUrl:{type:String,default:""},primaryColor:{type:String,default:"#f9f9f9"},secondaryColor:{type:String,default:"#ecebeb"},primaryOpacity:{type:Number,default:1},secondaryOpacity:{type:Number,default:1},uniqueKey:{type:String},animate:{type:Boolean,default:!0}},setup:function(e){var i=t.computed((function(){return e.uniqueKey?"".concat(e.uniqueKey,"-idClip"):r()})),n=t.computed((function(){return e.uniqueKey?"".concat(e.uniqueKey,"-idGradient"):r()})),o=t.computed((function(){var t;return null!==(t=e.width)&&void 0!==t?t:400})),c=t.computed((function(){var t;return null!==(t=e.height)&&void 0!==t?t:130}));return{idClip:i,idGradient:n,computedViewBox:t.computed((function(){var t;return null!==(t=e.viewBox)&&void 0!==t?t:"0 0 ".concat(o.value," ").concat(c.value)}))}},render:function(){return t.createVNode("svg",{width:this.width,height:this.height,viewBox:this.computedViewBox,version:"1.1",preserveAspectRatio:this.preserveAspectRatio},[t.createVNode("rect",{style:{fill:"url(".concat(this.baseUrl,"#").concat(this.idGradient,")")},"clip-path":"url(".concat(this.baseUrl,"#").concat(this.idClip,")"),x:"0",y:"0",width:"100%",height:"100%"},null),t.createVNode("defs",null,[t.createVNode("clipPath",{id:this.idClip},[this.$slots.default?this.$slots.default():t.createVNode("rect",{x:"0",y:"0",rx:"5",ry:"5",width:"100%",height:"100%"},null)]),t.createVNode("linearGradient",{id:this.idGradient},[t.createVNode("stop",{offset:"0%","stop-color":this.primaryColor,"stop-opacity":this.primaryOpacity},[this.animate?t.createVNode("animate",{attributeName:"offset",values:"-2; 1",dur:"".concat(this.speed,"s"),repeatCount:"indefinite"},null):null]),t.createVNode("stop",{offset:"50%","stop-color":this.secondaryColor,"stop-opacity":this.secondaryOpacity},[this.animate?t.createVNode("animate",{attributeName:"offset",values:"-1.5; 1.5",dur:"".concat(this.speed,"s"),repeatCount:"indefinite"},null):null]),t.createVNode("stop",{offset:"100%","stop-color":this.primaryColor,"stop-opacity":this.primaryOpacity},[this.animate?t.createVNode("animate",{attributeName:"offset",values:"-1; 2",dur:"".concat(this.speed,"s"),repeatCount:"indefinite"},null):null])])])])}}),n=t.defineComponent((function(e,r){var n=r.attrs;return function(){return t.createVNode(i,n,{default:function(){return[t.createVNode("circle",{cx:"10",cy:"20",r:"8"},null),t.createVNode("rect",{x:"25",y:"15",rx:"5",ry:"5",width:"220",height:"10"},null),t.createVNode("circle",{cx:"10",cy:"50",r:"8"},null),t.createVNode("rect",{x:"25",y:"45",rx:"5",ry:"5",width:"220",height:"10"},null),t.createVNode("circle",{cx:"10",cy:"80",r:"8"},null),t.createVNode("rect",{x:"25",y:"75",rx:"5",ry:"5",width:"220",height:"10"},null),t.createVNode("circle",{cx:"10",cy:"110",r:"8"},null),t.createVNode("rect",{x:"25",y:"105",rx:"5",ry:"5",width:"220",height:"10"},null)]}})}})),o=t.defineComponent((function(e,r){var n=r.attrs;return function(){return t.createVNode(i,n,{default:function(){return[t.createVNode("rect",{x:"0",y:"0",rx:"3",ry:"3",width:"70",height:"10"},null),t.createVNode("rect",{x:"80",y:"0",rx:"3",ry:"3",width:"100",height:"10"},null),t.createVNode("rect",{x:"190",y:"0",rx:"3",ry:"3",width:"10",height:"10"},null),t.createVNode("rect",{x:"15",y:"20",rx:"3",ry:"3",width:"130",height:"10"},null),t.createVNode("rect",{x:"155",y:"20",rx:"3",ry:"3",width:"130",height:"10"},null),t.createVNode("rect",{x:"15",y:"40",rx:"3",ry:"3",width:"90",height:"10"},null),t.createVNode("rect",{x:"115",y:"40",rx:"3",ry:"3",width:"60",height:"10"},null),t.createVNode("rect",{x:"185",y:"40",rx:"3",ry:"3",width:"60",height:"10"},null),t.createVNode("rect",{x:"0",y:"60",rx:"3",ry:"3",width:"30",height:"10"},null)]}})}})),c=t.defineComponent((function(e,r){var n=r.attrs;return function(){return t.createVNode(i,n,{default:function(){return[t.createVNode("rect",{x:"70",y:"15",rx:"4",ry:"4",width:"117",height:"6.4"},null),t.createVNode("rect",{x:"70",y:"35",rx:"3",ry:"3",width:"85",height:"6.4"},null),t.createVNode("rect",{x:"0",y:"80",rx:"3",ry:"3",width:"350",height:"6.4"},null),t.createVNode("rect",{x:"0",y:"100",rx:"3",ry:"3",width:"380",height:"6.4"},null),t.createVNode("rect",{x:"0",y:"120",rx:"3",ry:"3",width:"201",height:"6.4"},null),t.createVNode("circle",{cx:"30",cy:"30",r:"30"},null)]}})}})),a=t.defineComponent((function(e,r){var n=r.attrs;return function(){return t.createVNode(i,n,{default:function(){return[t.createVNode("rect",{x:"0",y:"0",rx:"3",ry:"3",width:"250",height:"10"},null),t.createVNode("rect",{x:"20",y:"20",rx:"3",ry:"3",width:"220",height:"10"},null),t.createVNode("rect",{x:"20",y:"40",rx:"3",ry:"3",width:"170",height:"10"},null),t.createVNode("rect",{x:"0",y:"60",rx:"3",ry:"3",width:"250",height:"10"},null),t.createVNode("rect",{x:"20",y:"80",rx:"3",ry:"3",width:"200",height:"10"},null),t.createVNode("rect",{x:"20",y:"100",rx:"3",ry:"3",width:"80",height:"10"},null)]}})}})),d=t.defineComponent((function(e,r){var n=r.attrs;return function(){return t.createVNode(i,t.mergeProps(n,{viewBox:"0 0 400 480"}),{default:function(){return[t.createVNode("circle",{cx:"30",cy:"30",r:"30"},null),t.createVNode("rect",{x:"75",y:"13",rx:"4",ry:"4",width:"100",height:"13"},null),t.createVNode("rect",{x:"75",y:"37",rx:"4",ry:"4",width:"50",height:"8"},null),t.createVNode("rect",{x:"0",y:"70",rx:"5",ry:"5",width:"400",height:"400"},null)]}})}}));e.BulletListLoader=n,e.CodeLoader=o,e.ContentLoader=i,e.FacebookLoader=c,e.InstagramLoader=d,e.ListLoader=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=vue-content-loader.umd.min.js.map