pxt-core/react-common/styles/controls/LazyImage.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

.common-lazy-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    .common-spinner {
        width: 60px;
        height: 60px;
    }

    .loading-element {
        position: absolute;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    i.fa-image {
        position: absolute;
        width: auto;
        height: auto;
        font-size: 5rem;

        opacity: 0;
    }

    img {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

.common-lazy-image-wrapper.loaded {
    .loading-element {
        opacity: 0;
    }

    i.fa-image {
        opacity: 0;
    }

    img {
        opacity: 1;
    }
}

.common-lazy-image-wrapper.error {
    .loading-element {
        opacity: 0;
    }

    i.fa-image {
        opacity: 1;
    }

    img {
        opacity: 0;
    }
}