Bulma: is-loading on any element ?

Created on 9 Jul 2017 · 4Comments · Source: jgthms/bulma

Hi,

How can I use the is-loading modifier (available for buttons) on any type of element ?
For example when loading a div content, ....

Regards

Source

Wikiki

👍19

Most helpful comment

I've done this for a component, you can get from here:

.element {
    &.is-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.5;
        &:after {
            @include loader;
            position: absolute;
            top: calc(50% - 2.5em);
            left: calc(50% - 2.5em);
            width: 5em;
            height: 5em;
            border-width: 0.25em;
        }
    }
}

rafaelpimpa on 10 Jul 2017

👍69 🎉21 ❤14

All 4 comments

I've done this for a component, you can get from here:

.element {
    &.is-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.5;
        &:after {
            @include loader;
            position: absolute;
            top: calc(50% - 2.5em);
            left: calc(50% - 2.5em);
            width: 5em;
            height: 5em;
            border-width: 0.25em;
        }
    }
}

rafaelpimpa on 10 Jul 2017

👍69 🎉21 ❤14

Thank you. It's working perfectly.

Wikiki on 10 Jul 2017

This should not be closed. I need this as well, it should be merged upstream.

vans163 on 11 Mar 2019

👍38

To those wondering how to use @include loader;, you have to import mixins like so: @import "~bulma/sass/utilities/mixins";.

In my case (Vue) I also have to import @import "~bulma/sass/utilities/initial-variables"; and @import "~bulma/sass/utilities/derived-variables"; before mixins.