.hc-skeleton {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999999999;
    background-color: #fff;
    padding: 24px
}

    .hc-skeleton > h3, .hc-skeleton > ul > li {
        width: 100%;
        height: 16px;
        background: #f2f2f2;
        list-style: none
    }

    .hc-skeleton > ul {
        list-style: none;
        margin-top: 24px
    }

        .hc-skeleton > ul > li:nth-child(n+1) {
            margin-top: 16px
        }

.hc-skeleton-active > h3, .hc-skeleton-active > ul > li {
    background: -webkit-gradient(linear,left top,right top,color-stop(25%,#f2f2f2),color-stop(37%,#e6e6e6),color-stop(63%,#f2f2f2));
    background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
    background-size: 400% 100%;
    -webkit-animation: hc-skeleton-loading 1.4s ease infinite;
    animation: hc-skeleton-loading 1.4s ease infinite
}

@-webkit-keyframes hc-skeleton-loading {
    0% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

@keyframes hc-skeleton-loading {
    0% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}