ilab_transporte_frontend/src/pages/site/Home.svelte

<script>
    import PageTitle from "$/components/PageTitle.svelte";
    import CantidadParaderos from "./CantidadParaderos.svelte";
    import CantidadLineas from "./CantidadLineas.svelte";
    import CantidadParaderosComuna from "./CantidadParaderosComuna.svelte";
    import CantidadBusesRecorrido from "./CantidadBusesRecorrido.svelte";
    import CantidadBusesLinea from "./CantidadBusesLinea.svelte";

    let loading1 = false
    let loading2 = false
    let loading3 = false
    let loading4 = false
    let loading5 = false
</script>

<PageTitle
    loading={loading1 || loading2 || loading3 || loading4 || loading5 }
><strong>Análisis</strong> de datos</PageTitle>

<div class="row">
    <div class="col-xs-12 col-md-7">
        <div class="row">
            <div class="col">
                <CantidadLineas on:loading={ev => loading1 = ev.detail} />
            </div>
            <div class="col">
                <CantidadParaderos on:loading={ev => loading2 = ev.detail} />
            </div>
        </div>

        <div class="row">
            <div class="col">
                <CantidadParaderosComuna on:loading={ev => loading3 = ev.detail} />
            </div>
            <div class="col">
                <CantidadBusesRecorrido on:loading={ev => loading4 = ev.detail} />
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-md-5">
        <CantidadBusesLinea on:loading={ev => loading5 = ev.detail} />
    </div>
</div>