1 | import { createVNode, mergeProps } from 'vue';
|
2 |
|
3 | var uid = (function () {
|
4 | return Math.random().toString(36).substring(2);
|
5 | });
|
6 |
|
7 | var ContentLoader = function ContentLoader(props, _ref) {
|
8 | var attrs = _ref.attrs,
|
9 | slots = _ref.slots;
|
10 | var idClip = props.uniqueKey ? props.uniqueKey + "-idClip" : uid();
|
11 | var idGradient = props.uniqueKey ? props.uniqueKey + "-idGradient" : uid();
|
12 | return createVNode("svg", mergeProps(attrs, {
|
13 | "viewBox": "0 0 " + props.width + " " + props.height,
|
14 | "version": "1.1",
|
15 | "preserveAspectRatio": props.preserveAspectRatio
|
16 | }), [createVNode("rect", {
|
17 | "style": {
|
18 | fill: "url(" + props.baseUrl + "#" + idGradient + ")"
|
19 | },
|
20 | "clip-path": "url(" + props.baseUrl + "#" + idClip + ")",
|
21 | "x": "0",
|
22 | "y": "0",
|
23 | "width": props.width,
|
24 | "height": props.height
|
25 | }, null), createVNode("defs", null, [createVNode("clipPath", {
|
26 | "id": idClip
|
27 | }, [slots["default"] ? slots["default"]() : createVNode("rect", {
|
28 | "x": "0",
|
29 | "y": "0",
|
30 | "rx": "5",
|
31 | "ry": "5",
|
32 | "width": props.width,
|
33 | "height": props.height
|
34 | }, null)]), createVNode("linearGradient", {
|
35 | "id": idGradient
|
36 | }, [createVNode("stop", {
|
37 | "offset": "0%",
|
38 | "stop-color": props.primaryColor,
|
39 | "stop-opacity": props.primaryOpacity
|
40 | }, [props.animate ? createVNode("animate", {
|
41 | "attributeName": "offset",
|
42 | "values": "-2; 1",
|
43 | "dur": props.speed + "s",
|
44 | "repeatCount": "indefinite"
|
45 | }, null) : null]), createVNode("stop", {
|
46 | "offset": "50%",
|
47 | "stop-color": props.secondaryColor,
|
48 | "stop-opacity": props.secondaryOpacity
|
49 | }, [props.animate ? createVNode("animate", {
|
50 | "attributeName": "offset",
|
51 | "values": "-1.5; 1.5",
|
52 | "dur": props.speed + "s",
|
53 | "repeatCount": "indefinite"
|
54 | }, null) : null]), createVNode("stop", {
|
55 | "offset": "100%",
|
56 | "stop-color": props.primaryColor,
|
57 | "stop-opacity": props.primaryOpacity
|
58 | }, [props.animate ? createVNode("animate", {
|
59 | "attributeName": "offset",
|
60 | "values": "-1; 2",
|
61 | "dur": props.speed + "s",
|
62 | "repeatCount": "indefinite"
|
63 | }, null) : null])])])]);
|
64 | };
|
65 |
|
66 | ContentLoader.props = {
|
67 | width: {
|
68 | type: [Number, String],
|
69 | "default": 400
|
70 | },
|
71 | height: {
|
72 | type: [Number, String],
|
73 | "default": 130
|
74 | },
|
75 | speed: {
|
76 | type: Number,
|
77 | "default": 2
|
78 | },
|
79 | preserveAspectRatio: {
|
80 | type: String,
|
81 | "default": 'xMidYMid meet'
|
82 | },
|
83 | baseUrl: {
|
84 | type: String,
|
85 | "default": ''
|
86 | },
|
87 | primaryColor: {
|
88 | type: String,
|
89 | "default": '#f9f9f9'
|
90 | },
|
91 | secondaryColor: {
|
92 | type: String,
|
93 | "default": '#ecebeb'
|
94 | },
|
95 | primaryOpacity: {
|
96 | type: Number,
|
97 | "default": 1
|
98 | },
|
99 | secondaryOpacity: {
|
100 | type: Number,
|
101 | "default": 1
|
102 | },
|
103 | uniqueKey: {
|
104 | type: String
|
105 | },
|
106 | animate: {
|
107 | type: Boolean,
|
108 | "default": true
|
109 | }
|
110 | };
|
111 |
|
112 | var BulletListLoader = function BulletListLoader(props, _ref) {
|
113 | var attrs = _ref.attrs;
|
114 | return createVNode(ContentLoader, attrs, {
|
115 | "default": function _default() {
|
116 | return [createVNode("circle", {
|
117 | "cx": "10",
|
118 | "cy": "20",
|
119 | "r": "8"
|
120 | }, null), createVNode("rect", {
|
121 | "x": "25",
|
122 | "y": "15",
|
123 | "rx": "5",
|
124 | "ry": "5",
|
125 | "width": "220",
|
126 | "height": "10"
|
127 | }, null), createVNode("circle", {
|
128 | "cx": "10",
|
129 | "cy": "50",
|
130 | "r": "8"
|
131 | }, null), createVNode("rect", {
|
132 | "x": "25",
|
133 | "y": "45",
|
134 | "rx": "5",
|
135 | "ry": "5",
|
136 | "width": "220",
|
137 | "height": "10"
|
138 | }, null), createVNode("circle", {
|
139 | "cx": "10",
|
140 | "cy": "80",
|
141 | "r": "8"
|
142 | }, null), createVNode("rect", {
|
143 | "x": "25",
|
144 | "y": "75",
|
145 | "rx": "5",
|
146 | "ry": "5",
|
147 | "width": "220",
|
148 | "height": "10"
|
149 | }, null), createVNode("circle", {
|
150 | "cx": "10",
|
151 | "cy": "110",
|
152 | "r": "8"
|
153 | }, null), createVNode("rect", {
|
154 | "x": "25",
|
155 | "y": "105",
|
156 | "rx": "5",
|
157 | "ry": "5",
|
158 | "width": "220",
|
159 | "height": "10"
|
160 | }, null)];
|
161 | }
|
162 | });
|
163 | };
|
164 |
|
165 | var CodeLoader = function CodeLoader(props, _ref) {
|
166 | var attrs = _ref.attrs;
|
167 | return createVNode(ContentLoader, attrs, {
|
168 | "default": function _default() {
|
169 | return [createVNode("rect", {
|
170 | "x": "0",
|
171 | "y": "0",
|
172 | "rx": "3",
|
173 | "ry": "3",
|
174 | "width": "70",
|
175 | "height": "10"
|
176 | }, null), createVNode("rect", {
|
177 | "x": "80",
|
178 | "y": "0",
|
179 | "rx": "3",
|
180 | "ry": "3",
|
181 | "width": "100",
|
182 | "height": "10"
|
183 | }, null), createVNode("rect", {
|
184 | "x": "190",
|
185 | "y": "0",
|
186 | "rx": "3",
|
187 | "ry": "3",
|
188 | "width": "10",
|
189 | "height": "10"
|
190 | }, null), createVNode("rect", {
|
191 | "x": "15",
|
192 | "y": "20",
|
193 | "rx": "3",
|
194 | "ry": "3",
|
195 | "width": "130",
|
196 | "height": "10"
|
197 | }, null), createVNode("rect", {
|
198 | "x": "155",
|
199 | "y": "20",
|
200 | "rx": "3",
|
201 | "ry": "3",
|
202 | "width": "130",
|
203 | "height": "10"
|
204 | }, null), createVNode("rect", {
|
205 | "x": "15",
|
206 | "y": "40",
|
207 | "rx": "3",
|
208 | "ry": "3",
|
209 | "width": "90",
|
210 | "height": "10"
|
211 | }, null), createVNode("rect", {
|
212 | "x": "115",
|
213 | "y": "40",
|
214 | "rx": "3",
|
215 | "ry": "3",
|
216 | "width": "60",
|
217 | "height": "10"
|
218 | }, null), createVNode("rect", {
|
219 | "x": "185",
|
220 | "y": "40",
|
221 | "rx": "3",
|
222 | "ry": "3",
|
223 | "width": "60",
|
224 | "height": "10"
|
225 | }, null), createVNode("rect", {
|
226 | "x": "0",
|
227 | "y": "60",
|
228 | "rx": "3",
|
229 | "ry": "3",
|
230 | "width": "30",
|
231 | "height": "10"
|
232 | }, null)];
|
233 | }
|
234 | });
|
235 | };
|
236 |
|
237 | var FacebookLoader = function FacebookLoader(props, _ref) {
|
238 | var attrs = _ref.attrs;
|
239 | return createVNode(ContentLoader, attrs, {
|
240 | "default": function _default() {
|
241 | return [createVNode("rect", {
|
242 | "x": "70",
|
243 | "y": "15",
|
244 | "rx": "4",
|
245 | "ry": "4",
|
246 | "width": "117",
|
247 | "height": "6.4"
|
248 | }, null), createVNode("rect", {
|
249 | "x": "70",
|
250 | "y": "35",
|
251 | "rx": "3",
|
252 | "ry": "3",
|
253 | "width": "85",
|
254 | "height": "6.4"
|
255 | }, null), createVNode("rect", {
|
256 | "x": "0",
|
257 | "y": "80",
|
258 | "rx": "3",
|
259 | "ry": "3",
|
260 | "width": "350",
|
261 | "height": "6.4"
|
262 | }, null), createVNode("rect", {
|
263 | "x": "0",
|
264 | "y": "100",
|
265 | "rx": "3",
|
266 | "ry": "3",
|
267 | "width": "380",
|
268 | "height": "6.4"
|
269 | }, null), createVNode("rect", {
|
270 | "x": "0",
|
271 | "y": "120",
|
272 | "rx": "3",
|
273 | "ry": "3",
|
274 | "width": "201",
|
275 | "height": "6.4"
|
276 | }, null), createVNode("circle", {
|
277 | "cx": "30",
|
278 | "cy": "30",
|
279 | "r": "30"
|
280 | }, null)];
|
281 | }
|
282 | });
|
283 | };
|
284 |
|
285 | var ListLoader = function ListLoader(props, _ref) {
|
286 | var attrs = _ref.attrs;
|
287 | return createVNode(ContentLoader, attrs, {
|
288 | "default": function _default() {
|
289 | return [createVNode("rect", {
|
290 | "x": "0",
|
291 | "y": "0",
|
292 | "rx": "3",
|
293 | "ry": "3",
|
294 | "width": "250",
|
295 | "height": "10"
|
296 | }, null), createVNode("rect", {
|
297 | "x": "20",
|
298 | "y": "20",
|
299 | "rx": "3",
|
300 | "ry": "3",
|
301 | "width": "220",
|
302 | "height": "10"
|
303 | }, null), createVNode("rect", {
|
304 | "x": "20",
|
305 | "y": "40",
|
306 | "rx": "3",
|
307 | "ry": "3",
|
308 | "width": "170",
|
309 | "height": "10"
|
310 | }, null), createVNode("rect", {
|
311 | "x": "0",
|
312 | "y": "60",
|
313 | "rx": "3",
|
314 | "ry": "3",
|
315 | "width": "250",
|
316 | "height": "10"
|
317 | }, null), createVNode("rect", {
|
318 | "x": "20",
|
319 | "y": "80",
|
320 | "rx": "3",
|
321 | "ry": "3",
|
322 | "width": "200",
|
323 | "height": "10"
|
324 | }, null), createVNode("rect", {
|
325 | "x": "20",
|
326 | "y": "100",
|
327 | "rx": "3",
|
328 | "ry": "3",
|
329 | "width": "80",
|
330 | "height": "10"
|
331 | }, null)];
|
332 | }
|
333 | });
|
334 | };
|
335 |
|
336 | var InstagramLoader = function InstagramLoader(props, _ref) {
|
337 | var attrs = _ref.attrs;
|
338 | return createVNode(ContentLoader, mergeProps(attrs, {
|
339 | "height": 480
|
340 | }), {
|
341 | "default": function _default() {
|
342 | return [createVNode("circle", {
|
343 | "cx": "30",
|
344 | "cy": "30",
|
345 | "r": "30"
|
346 | }, null), createVNode("rect", {
|
347 | "x": "75",
|
348 | "y": "13",
|
349 | "rx": "4",
|
350 | "ry": "4",
|
351 | "width": "100",
|
352 | "height": "13"
|
353 | }, null), createVNode("rect", {
|
354 | "x": "75",
|
355 | "y": "37",
|
356 | "rx": "4",
|
357 | "ry": "4",
|
358 | "width": "50",
|
359 | "height": "8"
|
360 | }, null), createVNode("rect", {
|
361 | "x": "0",
|
362 | "y": "70",
|
363 | "rx": "5",
|
364 | "ry": "5",
|
365 | "width": "400",
|
366 | "height": "400"
|
367 | }, null)];
|
368 | }
|
369 | });
|
370 | };
|
371 |
|
372 | export { BulletListLoader, CodeLoader, ContentLoader, FacebookLoader, InstagramLoader, ListLoader };
|