.overlay-load {
    background: rgba(255,255,255,0.6);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16em;
    height: 16em;
    transform: translate(-50%,-50%);
}

/* Chart */

.chart {
    color: #12395F;
}

    .chart::before,
    .chart::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0.25em;
        height: 8.125em;
        margin: 0 0 0 -3.25em;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%); /* IE 9 */
        -webkit-transform: translate(-50%,-50%); /* Safari */
        background-color: currentColor;
        border-radius: 0.125em;
    }

    .chart::after {
        width: 8.125em;
        height: 0.25em;
        margin: 3.125em 0 0 -0.125em;
    }

    .chart i {
        position: absolute;
        bottom: 4.75em;
        left: 9em;
        box-sizing: border-box;
        display: block;
        width: 1.875em;
        height: 0;
        background-color: #F69D88;
        box-shadow: inset 0 0 0 0.25em currentColor;
    }

        .chart i:first-child {
            animation: chart1 0.999s infinite linear;
        }

        .chart i:nth-child(2) {
            background-color: #FFDEA3;
            animation: chart2 0.999s 0.333s infinite linear;
        }

        .chart i:last-child {
            background-color: #85C996;
            animation: chart3 0.999s 0.666s infinite linear;
        }

@keyframes chart1 {
    0% {
        height: 0;
    }

    10% {
        height: 5.625em;
    }

    70% {
        width: 1.875em;
        transform: translateX(-4.375em);
        -ms-transform: translateX(-4.375em); /* IE 9 */
        ;
        -webkit-transform: translateX(-4.375em); /* Safari */
    }

    99% {
        width: 0;
        height: 5.625em;
        transform: translateX(-4.375em);
        -ms-transform: translateX(-4.375em); /* IE 9 */
        ;
        -webkit-transform: translateX(-4.375em); /* Safari */
    }

    99.1% {
        height: 0;
        transform: translateX(0em);
        -ms-transform: translateX(0em); /* IE 9 */
        ;
        -webkit-transform: translateX(0em); /* Safari */
    }

    100% {
        height: 0;
    }
}

@keyframes chart2 {
    0% {
        height: 0;
    }

    10% {
        height: 2.375em;
    }

    70% {
        width: 1.875em;
        transform: translateX(-4.375em);
        -ms-transform: translateX(-4.375em); /* IE 9 */
        ;
        -webkit-transform: translateX(-4.375em); /* Safari */
    }

    99% {
        width: 0;
        height: 2.375em;
        transform: translateX(-4.375em);
        -ms-transform: translateX(-4.375em); /* IE 9 */
        ;
        -webkit-transform: translateX(-4.375em); /* Safari */
    }

    99.1% {
        height: 0;
        transform: translateX(0em);
        -ms-transform: translateX(0em); /* IE 9 */
        ;
        -webkit-transform: translateX(0em); /* Safari */
    }

    100% {
        height: 0;
    }
}

@keyframes chart3 {
    0% {
        height: 0;
    }

    10% {
        height: 3.5625em;
    }

    70% {
        width: 1.875em;
        transform: translateX(-4.375em);
        -ms-transform: translateX(-4.375em); /* IE 9 */
        ;
        -webkit-transform: translateX(-4.375em); /* Safari */
    }

    99% {
        width: 0;
        height: 3.5625em;
        transform: translateX(-4.375em);
        -ms-transform: translateX(-4.375em); /* IE 9 */
        ;
        -webkit-transform: translateX(-4.375em); /* Safari */
    }

    99.1% {
        height: 0;
        transform: translateX(0em);
        -ms-transform: translateX(0em); /* IE 9 */
        ;
        -webkit-transform: translateX(0em); /* Safari */
    }

    100% {
        height: 0;
    }
}