vue-content-loader
Version:
SVG component to create placeholder loading, like Facebook cards loading.
421 lines (407 loc) • 10.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var uid = (function () {
return Math.random().toString(36).substring(2);
});
var ContentLoader = vue.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": true
}
},
setup: function setup(props) {
var idClip = vue.computed(function () {
return props.uniqueKey ? "".concat(props.uniqueKey, "-idClip") : uid();
});
var idGradient = vue.computed(function () {
return props.uniqueKey ? "".concat(props.uniqueKey, "-idGradient") : uid();
});
var width = vue.computed(function () {
var _a;
return (_a = props.width) !== null && _a !== void 0 ? _a : 400;
});
var height = vue.computed(function () {
var _a;
return (_a = props.height) !== null && _a !== void 0 ? _a : 130;
});
var computedViewBox = vue.computed(function () {
var _a;
return (_a = props.viewBox) !== null && _a !== void 0 ? _a : "0 0 ".concat(width.value, " ").concat(height.value);
});
return {
idClip: idClip,
idGradient: idGradient,
computedViewBox: computedViewBox
};
},
render: function render() {
return vue.createVNode("svg", {
"width": this.width,
"height": this.height,
"viewBox": this.computedViewBox,
"version": "1.1",
"preserveAspectRatio": this.preserveAspectRatio
}, [vue.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), vue.createVNode("defs", null, [vue.createVNode("clipPath", {
"id": this.idClip
}, [this.$slots["default"] ? this.$slots["default"]() : vue.createVNode("rect", {
"x": "0",
"y": "0",
"rx": "5",
"ry": "5",
"width": "100%",
"height": "100%"
}, null)]), vue.createVNode("linearGradient", {
"id": this.idGradient
}, [vue.createVNode("stop", {
"offset": "0%",
"stop-color": this.primaryColor,
"stop-opacity": this.primaryOpacity
}, [this.animate ? vue.createVNode("animate", {
"attributeName": "offset",
"values": "-2; 1",
"dur": "".concat(this.speed, "s"),
"repeatCount": "indefinite"
}, null) : null]), vue.createVNode("stop", {
"offset": "50%",
"stop-color": this.secondaryColor,
"stop-opacity": this.secondaryOpacity
}, [this.animate ? vue.createVNode("animate", {
"attributeName": "offset",
"values": "-1.5; 1.5",
"dur": "".concat(this.speed, "s"),
"repeatCount": "indefinite"
}, null) : null]), vue.createVNode("stop", {
"offset": "100%",
"stop-color": this.primaryColor,
"stop-opacity": this.primaryOpacity
}, [this.animate ? vue.createVNode("animate", {
"attributeName": "offset",
"values": "-1; 2",
"dur": "".concat(this.speed, "s"),
"repeatCount": "indefinite"
}, null) : null])])])]);
}
});
var BulletListLoader = vue.defineComponent(function (props, _a) {
var attrs = _a.attrs;
return function () {
return vue.createVNode(ContentLoader, attrs, {
"default": function _default() {
return [vue.createVNode("circle", {
"cx": "10",
"cy": "20",
"r": "8"
}, null), vue.createVNode("rect", {
"x": "25",
"y": "15",
"rx": "5",
"ry": "5",
"width": "220",
"height": "10"
}, null), vue.createVNode("circle", {
"cx": "10",
"cy": "50",
"r": "8"
}, null), vue.createVNode("rect", {
"x": "25",
"y": "45",
"rx": "5",
"ry": "5",
"width": "220",
"height": "10"
}, null), vue.createVNode("circle", {
"cx": "10",
"cy": "80",
"r": "8"
}, null), vue.createVNode("rect", {
"x": "25",
"y": "75",
"rx": "5",
"ry": "5",
"width": "220",
"height": "10"
}, null), vue.createVNode("circle", {
"cx": "10",
"cy": "110",
"r": "8"
}, null), vue.createVNode("rect", {
"x": "25",
"y": "105",
"rx": "5",
"ry": "5",
"width": "220",
"height": "10"
}, null)];
}
});
};
});
var CodeLoader = vue.defineComponent(function (props, _a) {
var attrs = _a.attrs;
return function () {
return vue.createVNode(ContentLoader, attrs, {
"default": function _default() {
return [vue.createVNode("rect", {
"x": "0",
"y": "0",
"rx": "3",
"ry": "3",
"width": "70",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "80",
"y": "0",
"rx": "3",
"ry": "3",
"width": "100",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "190",
"y": "0",
"rx": "3",
"ry": "3",
"width": "10",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "15",
"y": "20",
"rx": "3",
"ry": "3",
"width": "130",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "155",
"y": "20",
"rx": "3",
"ry": "3",
"width": "130",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "15",
"y": "40",
"rx": "3",
"ry": "3",
"width": "90",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "115",
"y": "40",
"rx": "3",
"ry": "3",
"width": "60",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "185",
"y": "40",
"rx": "3",
"ry": "3",
"width": "60",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "0",
"y": "60",
"rx": "3",
"ry": "3",
"width": "30",
"height": "10"
}, null)];
}
});
};
});
var FacebookLoader = vue.defineComponent(function (props, _a) {
var attrs = _a.attrs;
return function () {
return vue.createVNode(ContentLoader, attrs, {
"default": function _default() {
return [vue.createVNode("rect", {
"x": "70",
"y": "15",
"rx": "4",
"ry": "4",
"width": "117",
"height": "6.4"
}, null), vue.createVNode("rect", {
"x": "70",
"y": "35",
"rx": "3",
"ry": "3",
"width": "85",
"height": "6.4"
}, null), vue.createVNode("rect", {
"x": "0",
"y": "80",
"rx": "3",
"ry": "3",
"width": "350",
"height": "6.4"
}, null), vue.createVNode("rect", {
"x": "0",
"y": "100",
"rx": "3",
"ry": "3",
"width": "380",
"height": "6.4"
}, null), vue.createVNode("rect", {
"x": "0",
"y": "120",
"rx": "3",
"ry": "3",
"width": "201",
"height": "6.4"
}, null), vue.createVNode("circle", {
"cx": "30",
"cy": "30",
"r": "30"
}, null)];
}
});
};
});
var ListLoader = vue.defineComponent(function (props, _a) {
var attrs = _a.attrs;
return function () {
return vue.createVNode(ContentLoader, attrs, {
"default": function _default() {
return [vue.createVNode("rect", {
"x": "0",
"y": "0",
"rx": "3",
"ry": "3",
"width": "250",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "20",
"y": "20",
"rx": "3",
"ry": "3",
"width": "220",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "20",
"y": "40",
"rx": "3",
"ry": "3",
"width": "170",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "0",
"y": "60",
"rx": "3",
"ry": "3",
"width": "250",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "20",
"y": "80",
"rx": "3",
"ry": "3",
"width": "200",
"height": "10"
}, null), vue.createVNode("rect", {
"x": "20",
"y": "100",
"rx": "3",
"ry": "3",
"width": "80",
"height": "10"
}, null)];
}
});
};
});
var InstagramLoader = vue.defineComponent(function (props, _a) {
var attrs = _a.attrs;
return function () {
return vue.createVNode(ContentLoader, vue.mergeProps(attrs, {
"viewBox": "0 0 400 480"
}), {
"default": function _default() {
return [vue.createVNode("circle", {
"cx": "30",
"cy": "30",
"r": "30"
}, null), vue.createVNode("rect", {
"x": "75",
"y": "13",
"rx": "4",
"ry": "4",
"width": "100",
"height": "13"
}, null), vue.createVNode("rect", {
"x": "75",
"y": "37",
"rx": "4",
"ry": "4",
"width": "50",
"height": "8"
}, null), vue.createVNode("rect", {
"x": "0",
"y": "70",
"rx": "5",
"ry": "5",
"width": "400",
"height": "400"
}, null)];
}
});
};
});
exports.BulletListLoader = BulletListLoader;
exports.CodeLoader = CodeLoader;
exports.ContentLoader = ContentLoader;
exports.FacebookLoader = FacebookLoader;
exports.InstagramLoader = InstagramLoader;
exports.ListLoader = ListLoader;