https://github.com/MarketingPipeline/CSS-Image-Loader

Add a image loader & image load error (without adding an HTML element or using JS).
https://github.com/MarketingPipeline/CSS-Image-Loader

css css-animation css-animations css-framework css-loader css-tricks css3 front-end front-end-development frontend html html-css image-loader image-loading javascript proof-of-concept pure-css purecss scss

Last synced: 3 months ago
JSON representation

Add a image loader & image load error (without adding an HTML element or using JS).

• Host: GitHub
• URL: https://github.com/MarketingPipeline/CSS-Image-Loader
• Owner: MarketingPipeline
• License: mit
• Created: 2022-08-09T04:19:22.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T00:47:03.000Z (over 1 year ago)
• Last Synced: 2024-05-08T09:40:15.779Z (6 months ago)
• Topics: css, css-animation, css-animations, css-framework, css-loader, css-tricks, css3, front-end, front-end-development, frontend, html, html-css, image-loader, image-loading, javascript, proof-of-concept, pure-css, purecss, scss
• Language: CSS
• Homepage:
• Size: 58.6 KB
• Stars: 19
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-CSS-Resources - CSS-Image-Loader:

README

        
# CSS-Image-Loader







 Add a image loader & image load error (without adding an HTML element or using JS). Just pure CSS!

   Show your support! 

  


   

    

  

  

    

  

   

 


> Note: this is just a proof of concept. You should still provide a fallback source for your images using an onerror etc. As iOS / Webkit devices do NOT currently support the CSS attribute ::before needed for the fallback error image.

## Example

- **CSS Image Loader**

  [Source](https://github.com/MarketingPipeline/CSS-Image-Loader/blob/main/image-loader.css),

  [Demo](https://marketingpipeline.github.io/CSS-Image-Loader/index.html)

## Contributing ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/CSS-Image-Loader)

Want to help improve this [project](https://github.com/MarketingPipeline/CSS-Image-Loader/)? Create a pull request with your detailed changes! If approved you will be added to the list of contributors of this awesome [project](https://github.com/MarketingPipeline/CSS-Image-Loader/)!

See also the list of

[contributors](https://github.com/MarketingPipeline/CSS-Image-Loader/graphs/contributors) who

participate in this project.

## License  

This repo is licensed under the MIT License - see the

[LICENSE.md](https://github.com/MarketingPipeline/CSS-Image-Loader/blob/main/LICENSE) file for

details.