https://www.visitnarvik.com/modules/custom/common/vue/js/skeleton-loader.js?tmn3tx

1(function (Vue) {
2  // VUE 2 Component
3  Vue.component('skeleton-box', {
4    name: 'SkeletonBox',
5    props: {
6      maxWidth: {
7        // The default maxiumum width is 100%.
8        default: 100,
9        type: Number,
10      },
11      minWidth: {
12        // Lines have a minimum width of 80%.
13        default: 80,
14        type: Number,
15      },
16      height: {
17        // Make lines the same height as text.
18        default: '1em',
19        type: String,
20      },
21      marginTop: {
22        // Make lines the same height as text.
23        default: null,
24        type: String,
25      },
26      width: {
27        // Make it possible to define a fixed
28        // width instead of using a random one.
29        default: null,
30        type: String,
31      },
32      borderRadius: {
33        // Make it possible to define a fixed
34        // width instead of using a random one.
35        default: null,
36        type: String,
37      },
38    },
39    template: '<span :style="{ height, marginTop, width: computedWidth, borderRadius }" class="SkeletonBox"/>',
40
41    computed: {
42      computedWidth() {
43        // Either use the given fixed width or
44        // a random width between the given min
45        // and max values.
46        return this.width || `${Math.floor((Math.random() * (this.maxWidth - this.minWidth)) + this.minWidth)}%`;
47      },
48    },
49
50  })
51})(Vue);