salix-front/src/components/ui/SkeletonSummary.vue

<template>
    <div class="header bg-primary q-pa-sm q-mb-md">
        <QSkeleton type="rect" square />
    </div>
    <div class="row q-pa-md q-col-gutter-md q-mb-md">
        <QSkeleton type="rect" class="q-mb-md" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="rect" class="q-mb-md" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="rect" class="q-mb-md" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="rect" class="q-mb-md" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="rect" class="q-mb-md" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
        <QSkeleton type="text" square />
    </div>
</template>

<style lang="scss" scoped>
.row {
    flex-wrap: wrap;

    .col {
        min-width: 250px;
    }
}
</style>