49 lines
1.6 KiB
Vue
49 lines
1.6 KiB
Vue
|
<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>
|