53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<vue-content-loading v-if="width" :width="width" :height="100" :primary="primary" :secondary="secondary">
|
||
|
|
<circle cx="30" cy="30" r="30" />
|
||
|
|
<rect x="75" y="13" rx="4" ry="4" :width="150 + r1" height="15" />
|
||
|
|
<rect x="75" y="39" rx="4" ry="4" :width="260 + r2" height="10" />
|
||
|
|
<rect x="75" y="59" rx="4" ry="4" :width="230 + r3" height="10" />
|
||
|
|
</vue-content-loading>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import Vue from 'vue';
|
||
|
|
import VueContentLoading from 'vue-content-loading';
|
||
|
|
import * as tinycolor from 'tinycolor2';
|
||
|
|
|
||
|
|
export default Vue.extend({
|
||
|
|
components: {
|
||
|
|
VueContentLoading,
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
width: 0,
|
||
|
|
r1: (Math.random() * 100) - 50,
|
||
|
|
r2: (Math.random() * 100) - 50,
|
||
|
|
r3: (Math.random() * 100) - 50
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
text(): tinycolor.Instance {
|
||
|
|
const text = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text'));
|
||
|
|
return text;
|
||
|
|
},
|
||
|
|
|
||
|
|
primary(): string {
|
||
|
|
return '#' + this.text.clone().toHex();
|
||
|
|
},
|
||
|
|
|
||
|
|
secondary(): string {
|
||
|
|
return '#' + this.text.clone().darken(20).toHex();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
let width = this.$el.clientWidth;
|
||
|
|
if (width < 400) width = 400;
|
||
|
|
this.width = width;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|