Эффект загрузки в HTML CSS для текста

Это похоже на то, что вам нужно. Это делается только с помощью CSS / HTML, и вы можете легко настроить его на свой вкус.

https://jsfiddle.net/hau122w8/

<div class = "timeline-item">
    <div class = "animated-background">
        <div class = "background-masker content-first"></div>
        <div class = "background-masker content-top"></div>
        <div class = "background-masker content-first-end"></div>
        <div class = "background-masker content-second-line"></div>
        <div class = "background-masker content-second-end"></div>
        <div class = "background-masker content-third-line"></div>
        <div class = "background-masker content-third-end"></div>
    </div>
</div>

.timeline-item {
    background-color: #fff;
    border: 1px solid;
    border-color: #ddd;
    border-radius: 3px;
    padding: 12px;
    margin: 0 auto;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 10000px 0;
    }
}

.animated-background {
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: placeHolderShimmer;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #aacfde 18%, #eeeeee 33%);
    height: 96px;
    position: relative;
}

.background-masker {
    background: #fff;
    position: absolute;
}

    /* Every thing below this is just positioning */

    .background-masker.content-top,
    .background-masker.content-second-line,
    .background-masker.content-third-line,
    .background-masker.content-second-end,
    .background-masker.content-third-end,
    .background-masker.content-first-end {
        top: 40px;
        left: 0;
        right: 0;
        height: 6px;
    }

    .background-masker.content-first {
        height: 10px;
        top: 15px;
        left: 0;
        right: 0;
    }

    .background-masker.content-top {
        height: 20px;
    }

    .background-masker.content-first-end,
    .background-masker.content-second-end,
    .background-masker.content-third-end {
        width: auto;
        left: 380px;
        right: 0;
        top: 60px;
        height: 8px;
    }

    .background-masker.content-second-line {
        top: 68px;
    }

    .background-masker.content-second-end {
        left: 420px;
        top: 74px;
    }

    .background-masker.content-third-line {
        top: 82px;
    }

    .background-masker.content-third-end {
        left: 300px;
        top: 88px;
    }