mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
87 lines
1.4 KiB
Vue
87 lines
1.4 KiB
Vue
<script setup>
|
|
const columns = [{
|
|
key: 'name',
|
|
label: 'Name'
|
|
}, {
|
|
key: 'title',
|
|
label: 'Title'
|
|
}, {
|
|
key: 'email',
|
|
label: 'Email'
|
|
}, {
|
|
key: 'role',
|
|
label: 'Role'
|
|
}, {
|
|
key: 'actions'
|
|
}]
|
|
|
|
const people = []
|
|
|
|
const pending = ref(true)
|
|
</script>
|
|
|
|
<template>
|
|
<UTable :rows="people" :columns="columns" :loading="pending">
|
|
<template #loading-state>
|
|
<div class="flex items-center justify-center h-32">
|
|
<i class="loader --6" />
|
|
</div>
|
|
</template>
|
|
</UTable>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* https://codepen.io/jenning/pen/YzNmzaV */
|
|
|
|
.loader {
|
|
--color: rgb(var(--color-primary-400));
|
|
--size-mid: 6vmin;
|
|
--size-dot: 1.5vmin;
|
|
--size-bar: 0.4vmin;
|
|
--size-square: 3vmin;
|
|
|
|
display: block;
|
|
position: relative;
|
|
width: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.loader::before,
|
|
.loader::after {
|
|
content: '';
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
}
|
|
|
|
/**
|
|
loader --6
|
|
**/
|
|
.loader.--6::before {
|
|
width: var(--size-square);
|
|
height: var(--size-square);
|
|
background-color: var(--color);
|
|
top: calc(50% - var(--size-square));
|
|
left: calc(50% - var(--size-square));
|
|
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
|
|
}
|
|
|
|
@keyframes loader-6 {
|
|
0%, 100% {
|
|
transform: none;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(100%) translateY(100%);
|
|
}
|
|
|
|
75% {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
</style>
|