wiki-grav/plugins/flex-objects/app/list/components/ContentLoader.vue

49 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<div>
<div :style="{ height: 300, width: '100%' }"></div>
<content-loader
:height="fixedAmount * count"
:width="1060"
:speed="2"
primaryColor="#d9d9d9"
secondaryColor="#ecebeb"
>
<template v-for="index in count">
<rect x="13" :y="fixedAmount * index + offset" rx="6" ry="6" :width="200 * random()" height="12" />
<rect x="533" :y="fixedAmount * index + offset" rx="6" ry="6" :width="63 * random()" height="12" />
<rect x="653" :y="fixedAmount * index + offset" rx="6" ry="6" :width="78 * random()" height="12" />
<rect x="755" :y="fixedAmount * index + offset" rx="6" ry="6" :width="117 * random()" height="12" />
<rect x="938" :y="fixedAmount * index + offset" rx="6" ry="6" :width="83 * random()" height="12" />
<rect x="0" :y="fixedAmount * index" rx="6" ry="6" width="1060" height=".3" />
</template>
</content-loader>
</div>
</template>
<script>
import { ContentLoader } from 'vue-content-loader';
export default {
props: ['store'],
data: () => ({
fixedAmount: 31,
offset: 10,
steps: [0.7, 0.8, 0.9, 1]
}),
computed: {
count() {
return this.store.perPage;
}
},
methods: {
random() {
return this.steps[Math.floor(Math.random() * this.steps.length)];
}
},
components: {
ContentLoader
}
}
</script>