In Page.php, the loaderIcon is assigned to loader-2.gif. I'd like to reassign this image to my image. However, that involves changing this file.

Is there an easy way to either override this attribute specifically, or maybe override the function in question, or even override the entire file?

The function from Page.php:

// 'magento/vendor/magento/framework/View/Result/Page.php'

 * @param ResponseInterface $response
 * @return $this
protected function render(ResponseInterface $response)
    if ($this->getPageLayout()) {
        $config = $this->getConfig();
        $addBlock = $this->getLayout()->getBlock('head.additional'); // todo
        $requireJs = $this->getLayout()->getBlock('require.js');
            'requireJs' => $requireJs ? $requireJs->toHtml() : null,
            'headContent' => $this->pageConfigRenderer->renderHeadContent(),
            'headAdditional' => $addBlock ? $addBlock->toHtml() : null,
            'htmlAttributes' => $this->pageConfigRenderer->renderElementAttributes($config::ELEMENT_TYPE_HTML),
            'headAttributes' => $this->pageConfigRenderer->renderElementAttributes($config::ELEMENT_TYPE_HEAD),
            'bodyAttributes' => $this->pageConfigRenderer->renderElementAttributes($config::ELEMENT_TYPE_BODY),
            'loaderIcon' => $this->getViewFileUrl('images/loader-2.gif'),

        $output = $this->getLayout()->getOutput();
        $this->assign('layoutContent', $output);
        $output = $this->renderPage();
    } else {
    return $this;

I'd like to make the following change:

'loaderIcon' => $this->getViewFileUrl('images/icons/loading.svg'),

We're also considering a url rewrite or generating an animated gif out of our svg, in the worst case.

Thanks in advance!

Best Michael

  • Anyone? crickets
    – M. Herold
    Mar 25, 2017 at 1:10

3 Answers 3


The solution I arrived at was to override the loader-2.gif using CSS, e.g.

> .loading-mask {
    .loader {
        $loader-size: 40px;

        img {
            box-sizing: border-box;
            width: $loader-size;
            height: $loader-size;
            padding-left: $loader-size;
            background-image: url('#{$baseDir}images/icons/loading.svg');
            background-repeat: no-repeat;
            background-size: contain;

Just override these files in your custom theme

  • web/css/source/lib/variables/_loaders.less
  • web/images/loader-1.gif
  • web/images/loader-2.gif

to get the desired result. By this way you can replace all spinners.

  • 1
    The problem is that I would like to replace the gif with an svg, so I can't properly override the file.
    – M. Herold
    Apr 20, 2017 at 4:43

I have found an alternative solution by overriding the following file in my own theme folder : vendor/magento/module-theme/view/base/templates/root.phtml

Change the $loaderIcon variable to $this->getViewFileUrl('loader-path.svg').

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.