ArticleTemplates/assets/scss/modules/_loading.scss

// /*doc
// ---
// title: Loading
// name: loading
// category: Modules
// ---
// Display loading animation to provide feedback to the user.
//
// ```html_example
// <div class="loading" data-icon="&#xe00C;">
// </div>
// ```
// */

.loading {
    &::before {
        height: 50px;
        width: 50px;
        margin: 0 auto;
        display: block;
        color: color(brightness-0);
        font-size: 44px;
        line-height: 44px;
        opacity: 1;
        text-align: center;
        animation: pulse 2s;
        -moz-animation: pulse 2s infinite;
        -webkit-animation: pulse 2s infinite;
        
        @-moz-keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
            100% {
                opacity: 1;
            }
        }
        
        @-webkit-keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
            100% {
                opacity: 1;
            }
        }
    }

    .container--has-failed & {
        display: none;
    }
}

.loading--liveblog {
    // Hidden by default, revealed when user clicks on view more
    display: none;

    &.loading--visible {
        display: block;
        padding: base-px(2, 0);
    }
}