.loading_text{
    /* Centrat sota el spinner. Abans hi havia un transform fix
       calibrat per a la paraula "Loading"; amb textos més llargs
       (ex. "Connectant amb la cartellera") quedava descentrat. */
    text-align: center;
    margin-top: 10px;
    color: #28cb02;
}
.wrapper_spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1b1a17;
    opacity: 1;
    z-index: 200;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    transition: opacity 600ms linear;
  }
  

.spinner {
    /* Part del flow del flex container `.wrapper_spinner` (column,
       items-center). Així se centra horitzontalment automàticament i
       els textos s'apilen sota sense solapar-se amb els ítems orbitant. */
    position: relative;
    height: 2rem;
    width: 2rem;
    margin: 1rem 0 1rem 0;
}
.container {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    width: 2rem;
}
.block {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    width: 2rem;
}
.block >
.item {
    position: absolute;
    height: 1rem;
    width: 1rem;
    background: #28cb02;
    animation: move 0.5s linear infinite;
}
.block >
.item:nth-of-type(1) {
    top: -1rem;
    left: -1rem;
    animation-delay: 0s;
}
.block >
.item:nth-of-type(2) {
    top: -1rem;
    left: 0;
    animation-delay: -0.0625s;
}
.block >
.item:nth-of-type(3) {
    top: -1rem;
    left: 1rem;
    animation-delay: -0.125s;
}
.block >
.item:nth-of-type(4) {
    top: 0;
    left: 1rem;
    animation-delay: -0.1875s;
}
.block >
.item:nth-of-type(5) {
    top: 1rem;
    left: 1rem;
    animation-delay: -0.25s;
}
.block >
.item:nth-of-type(6) {
    top: 1rem;
    left: 0;
    animation-delay: -0.3125s;
}
.block >
.item:nth-of-type(7) {
    top: 1rem;
    left: -1rem;
    animation-delay: -0.375s;
}
.block >
.item:nth-of-type(8) {
    top: 0;
    left: -1rem;
    animation-delay: -0.4375s;
}
@keyframes move {
    0% {
        opacity: 0;
   }
    10% {
        opacity: 1;
   }
    70% {
        opacity: 0;
   }
    100% {
        opacity: 0;
   }
}