Author: | MarketingPipeline |
---|---|
Views Total: | 907 views |
Official Page: | Go to website |
Last Update: | August 13, 2022 |
License: | MIT |
Preview:

Description:
A pure CSS loading indicator that displays when an image is loading on the page. It has the ability to display a fallback error image if the original image fails to load.
How to use it:
1. Download and load the image-loader.css in the document.
<link href="image-loader.css" rel="stylesheet" />
2. That’s it. Override the default fallback error image in the CSS. Noe that ::after
is not supported for WebKit devices. You should provide the fallback image source using onerror etc.
img::after { content: ' '; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: hsl(220, 20%, 90%); /* Error Image (can used a normal url or SVG if prefered) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='545.79' height='545.79' viewBox='0 0 144.407 144.407'%3E%3Cg transform='matrix(6.56831 0 0 6.56831 -603.38518 -966.29009)'%3E%3Cpath d='M98.902 149.99l2.093 2.093h8.487c.823 0 1.292.206 1.584.498s.496.759.496 1.582v8.486l1.834 1.834c.175-.512.259-1.076.259-1.666v-8.654c0-1.203-.346-2.298-1.111-3.063s-1.86-1.111-3.063-1.111zm-2.784.043c-.919.114-1.741.457-2.352 1.068-.765.765-1.109 1.86-1.109 3.063v8.654c0 1.203.345 2.297 1.109 3.062s1.862 1.109 3.064 1.109h12.652c1.049 0 2.017-.263 2.754-.838l-1.505-1.505c-.288.155-.686.251-1.249.251H96.83c-.823 0-1.292-.206-1.584-.498s-.498-.759-.498-1.582v-8.654c0-.823.205-1.29.498-1.582s.761-.498 1.584-.498h1.337z'/%3E%3Ccircle cx='108.403' cy='155.353' r='1.25'/%3E%3Cpath d='M93.277 147.113l-1.414 1.414 10.671 10.591-1.659 2.261-.237-.276-1.536-1.79-1.536 1.79-1.536 1.79h3.073.474 2.599 1.665 2.39l6.205 6.206 1.414-1.414-20.57-20.572z'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-position: center; background-repeat: no-repeat; }
Changelog:
08/13/2022
- Update