RealMelon

CSS Loader — Pure HTML, CSS and JS based loader

July 10, 2018

CSS Loader (Without Library) CSS Loader (Without Library)

We often need a code snippet for CSS loader and we do not want to include any library for that.

To deal with this situation, I have created a code snippet which can be easily embedded into any project and you can get the loader feature.

I have created 2 selector that can show/hide the loader and fade out the content till the time page is loading.

fade and #modal — These will toggle the loader based on their display properties.

  1. Show loader — Simply change their style display to block (style.display = ‘block’).
  2. Hide Loader — Simply change their style display to block (style.display = ‘none’).

The example above is the one implementation and we can use it anyway we need.

Conclusion :- Use this code snippet to embed the loader in your app. You can customise it at any level to match your need.

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.