How to show loader icon in custom div magento 2

Question

how to show non stop loader icon in custom div when page is starting work

<div id="loader-example">
    <h3>Block</h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos itaque numquam placeat quam recusandae velit voluptas. Ad architecto asperiores eos eveniet id nostrum officiis saepe soluta totam voluptate! Debitis, quibusdam.
</div>

i'm trying this from magento 2 docs

<div id="loader-example" data-mage-init='{"loader": { "icon":"<?=$imagePath;?>"}}'>
    <h3>Block</h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos itaque numquam placeat quam recusandae velit voluptas. Ad architecto asperiores eos eveniet id nostrum officiis saepe soluta totam voluptate! Debitis, quibusdam.
</div>
<script>
require(['jquery', 'loader', 'domReady!'], function ($) {
    'use strict';

    $('#loader-example').trigger('processStart');
    
});
</script>

Answer 1

Did you try loader widget of magento?

If not you can try this for custom your loader which you want https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_loader.html

Answer 2

In any .phtml file :

<div id="loader-example">
<h3>Block</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos itaque numquam placeat quam recusandae velit voluptas. Ad architecto asperiores eos eveniet id nostrum officiis saepe soluta totam voluptate! Debitis, quibusdam.
</div>

<script>
require(['jquery', 'loader'], function ($) {
    // To initialize loader
    $('#loader-example').loader({
        icon: "<?= $block->escapeUrl($block->getViewFileUrl('images/loader-2.gif')); ?>"
    });

    // To enable loader
    $('#loader-example').loader('show');

    // To disable loader
    // $('#loader-example').loader('hide');
});
</script>

Then, in your .less file :

#loader-example {
    position: relative;

    .loading-mask {
        position: absolute;

        img {
            position: absolute;
        }
    }
}