1

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>

2 Answers 2

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

8
  • <div id="loader-example" data-mage-init='{"loader": { "icon": "{store URL}/static/{static version}/frontend/Magento/luma/en_US/images/loader-2.gif"}}'> <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>
    – NoOn
    Commented Oct 21, 2021 at 11:11
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Oct 21, 2021 at 11:11
  • i tried this but not working
    – NoOn
    Commented Oct 21, 2021 at 11:11
  • edit my answer))
    – NoOn
    Commented Oct 21, 2021 at 11:14
  • Did you face any error when inspect? Commented Oct 21, 2021 at 11:20
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;
        }
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.