styles.css

img[data-loadonvisible],
img.imageopt_loading {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 120px 120px;
    box-shadow: 0 0 0 1px #ddd inset;
    animation: anim_imageopt_loading 5s infinite;
}

@keyframes anim_imageopt_loading {
    /* Note - these background images are done as inline svgs because they will all load at the same time and are used
    /* to provide animation - loading separate assets would make the animation fliker the first time it was viewed.
    /* I tried to use an svg spriting technique for this but it didn't work.
    /* csslint ignore:start */
    0% {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><style>path {stroke: #aaa; fill: #aaa;}</style></defs><path d='M30 4c0 0 0 0 0 0v24c0 0 0 0 0 0h-28c0 0 0 0 0 0v-24c0 0 0 0 0 0h28zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z'/><path d='M26 9c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/><path d='M28 26h-24v-4l7-12 8 10h2l7-6z'/></svg>");
    }
    20% {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><style>path {stroke: #aaa; fill: #aaa;}</style></defs><path d='M30 4c0 0 0 0 0 0v24c0 0 0 0 0 0h-28c0 0 0 0 0 0v-24c0 0 0 0 0 0h28zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z'/><path d='M26 12c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/><path d='M28 26h-24v-4l7-12 8 10h2l7-6z'/></svg>");
    }
    40% {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><style>path {stroke: #aaa; fill: #aaa;}</style></defs><path d='M30 4c0 0 0 0 0 0v24c0 0 0 0 0 0h-28c0 0 0 0 0 0v-24c0 0 0 0 0 0h28zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z'/><path d='M26 15c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/><path d='M28 26h-24v-4l7-12 8 10h2l7-6z'/></svg>");
    }
    60% {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><style>path {stroke: #aaa; fill: #aaa;} </style></defs><path d='M30 4c0 0 0 0 0 0v24c0 0 0 0 0 0h-28c0 0 0 0 0 0v-24c0 0 0 0 0 0h28zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z'/><path d='M26 18c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/><path d='M28 26h-24v-4l7-12 8 10h2l7-6z'/></svg>");
    }
    80% {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><style>path {stroke: #aaa; fill: #aaa;} </style></defs><path d='M30 4c0 0 0 0 0 0v24c0 0 0 0 0 0h-28c0 0 0 0 0 0v-24c0 0 0 0 0 0h28zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z'/><path d='M28 26h-24v-4l7-12 8 10h2l7-6z'/></svg>");
    }
    100% {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><style> path {stroke: #aaa; fill: #aaa;} </style></defs><path d='M30 4c0 0 0 0 0 0v24c0 0 0 0 0 0h-28c0 0 0 0 0 0v-24c0 0 0 0 0 0h28zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z'/><path d='M26 6c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/><path d='M28 26h-24v-4l7-12 8 10h2l7-6z'/></svg>");
    }
    /* csslint ignore:end */
}