/* Circular spinner shown over an admin image preview until the image has loaded.
   Markup comes from alo_live.utils.admin_images.image_with_loader. */
.img-loader {
    position: relative;
    display: inline-block;
    min-width: 32px;
    min-height: 32px;
    vertical-align: middle;
}
.img-loader img {
    opacity: 0;
    transition: opacity .2s ease-in;
}
.img-loader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(128, 128, 128, .25);
    border-top-color: #417690;
    border-radius: 50%;
    animation: img-loader-spin .8s linear infinite;
}
.img-loader.is-loaded img { opacity: 1; }
.img-loader.is-loaded::after,
.img-loader.is-failed::after { display: none; }
.img-loader.is-failed img { opacity: .4; }

@keyframes img-loader-spin { to { transform: rotate(360deg); } }