Simple css loader how to#

That is how developers came to use pure CSS over GIF animations which were used a long time ago in web development. I hope you enjoyed this little session as much as i did writing it and to see you again soon on Css Ninja. Using a CSS animation has an advantage that we are avoiding image request (.gif for example), that means the loader would be shown even if the system or transfer is slow or halted. If you want to share your thoughts or ask a question, give it a shot in the comments section.

Simple css loader how to#

In this post, we saw how to create a Bulma loader using CSS and some very light jQuery. Tada, that's all, our loader is ready to go. is-active class to the loader-wrapper element and to remove it after 3 seconds, faking the loading process. This is really straightforward, we just tell the browser to add the.

$('.loader-wrapper').removeClass('is-active') Since we are not actually loading anything, we need to fake the loading process using a javascript setTimeout function. That is all the markup and styles we will need to make our loader work. Of course, we cannot see it when the parent wrapper element is not active ( opacity: 0 ). is-loading Bulma class we talked about before, so that the loader div continuously displays a spinner. We give that same element a width and height, because this will be determining the size of our spinner. loader element is perfectly centered, both vertically and horizontally. If z-index doesn't fit in your own scenario, you could imagine replacing it with the pointer-events property.Īlso, we use flexbox on the wrapper to make sure that the.

Notice also the z-index used between the two different states. This way, it stays hidden when not active. Notice that we give a default opacity of 0 to the. Let's start with the loader Html markup : įor our loader to cover the box, we need to position it absolutely, inside the box, which is relatively positionned. Our loader will take the form of an overlay that will cover the box when active. box element to create a box that provides a text and a button to activate the loader. Let's begin with the html markup we are going to need for our custom Loader. We are going to use it to create a custom loader. Taking advantage of a Bulma classīulma natively exposes a css class used for buttons and and form controls, when they need to show a loading state. But Bulma can still save you from wasting that time.

Sometimes, it can take time to build a nice loader that will adapt to any situation. They a re a great help in making users wait while the page content is still loading, often represented by a spinning shape. Using loaders is quite a common thing when you have to build websites and applications.