.card-loading {
    width: 100% !important;
}
.card-loading .avatar {
    width: 52px;
    height: 52px;
    background-color: #ccc;
    border-radius: 25%;
    margin: 8px;
    background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
    background-size: 600px;
    animation: shine-avatar 2s infinite ease-out;
}
.card-loading .line {
    width: 100%;
    height: 16px;
    margin-top: 12px;
    border-radius: 7px;
    background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
    background-size: 600px;
    animation: shine-lines 2s infinite ease-out;
}
.card-loading .line:first-child {
    margin-top: 11px;
    width: 100%;
}
.card-loading .line ~ .line {
    background-color: #ddd;
}

@keyframes shine-lines {
    0% {
        background-position: -100px;
    }
    40%, 100% {
        background-position: 540px;
    }
}
@keyframes shine-avatar {
    0% {
        background-position: -32px;
    }
    40%, 100% {
        background-position: 208px;
    }
}