Selectize.js: Custom loading indicator beyond loadingClass

[aureole82]

I walked through all examples of selectize.js (Version 0.12.6) and found the spinner of movies.html.
This example uses some cumbersome css to display an image (spinner.gif) if the loading class is present:

.selectize-control.movies::before {
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    content: ' ';
    z-index: 2;
    position: absolute;
    display: block;
    top: 12px;
    right: 34px;
    width: 16px;
    height: 16px;
    background: url(images/spinner.gif);
    background-size: 16px 16px;
    opacity: 0;
}
.selectize-control.movies.loading::before {
    opacity: 0.4;
}

We cannot provide an extra image. We rather like to use a web font (like FontAwesome's <i class="fas fa-spinner fa-spin"></i>).
I know how to hide/show elements below div.selectize-control.loading. But the question is: What's the best way to place my custom elements inside div.selectize-control?

Thanks alot in advance!

[Pictor13]

Did you think about using a pseudo-element like :after instead of using a <i> tag?
(that is not even semantic, since that tag is supposed to be used for italic)

I went that way and it works good, without adding unnecessary extra markup:

.selectize-control.loading:after {
    font-family: 'entypo' !important;
    speak: none;
    text-transform: none;
    line-height: inherit;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "" !important; /* here is set the character corresponding to the entypo icon */
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 9.94px;
}

This is the (incomplete) copy/paste of my loading pseudo-element styling. You can take a look to how I did it in our Honeybee CMF.

Otherwise, to answer your specific question, I think you can $('.selectize-control').append('<i class="fas fa-spinner fa-spin"></i>') and give it the style .selectize-control:not(.loading) { display: none; } (or vice-versa).

Hope it helps!
(please close the issue if it does)

[whatthefork]

You can adjust the CSS to insert a spinner from FontAwesome, something like this:

 .selectize-control.search_products::before {
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    content: ' ';
    z-index: 2;
    position: absolute;
    display: block;
    top: 6px;
    right: 36px;
    font-family: 'Font Awesome 5 Free';
    content: "\f110";
    opacity: 0;
    -webkit-animation: none;
    animation: none;
}
.selectize-control.search_products.loading::before {
    opacity: 1;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days