Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8, Demo 6, Loader


Hi All,

With regards to the following in Layout Builder here: https://preview.keenthemes.com/metronic8/demo6/layout-builder.html

Do you have any advice on how to ensure that the 'spinner & message' renders correctly when on mobile? It seems like the 'loading' first starts off to the lower right and then snaps properly into place when the page loading moves along with presumably some responsive logic firing.

I'd like it to be properly centered regardless of whether or not I'm on a desktop or mobile device.

Thanks in advance.

Best regards,
Brock


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


Hi,

Could you please let us know which Metronic version and build method(gulp, webpack) are you using?

How do you trigger the loader? By page reload or when the user clicks a certain UI element ?
If you can provide a video of the issue you encounter that would be very helpful to investigate the issue. Also please let us know if we can reproduce this in Metronic live preview site.

Regards.



Hi Sean,

Thank you for your follow-up. Please find the following screencast to answer your questions:

https://www.loom.com/looms/videos/RTHG-081460264bb54b72a4e021890a48bd64

Best regards,
Brock



Hi,

https://www.loom.com/looms/videos/RTHG-081460264bb54b72a4e021890a48bd64 shows 404

Regards.



Sorry about that. Try this one, Sean:

https://www.loom.com/share/83e5ef5acf0d4da0be9fe518a1d6b7a2

Loom recently changed the way that sharable links are created... and in particular when you move them to a folder.



Hi,

The video shows it in desktop mode however you mentioned that the issue was in mobile.

Can you provide access to your test URL via private reply? The video does not provide much information about the issue.

Is this the Metronic layout that you customized? Which version of Metronic and which demo are you using?

Regards.



Hmm... in my video I'm showing the rendering as mobile via Chrome tools. Even though it's on Desktop, Chrome Tools allows me as a developer to see how the app renders in a variety of mobile settings.

Anyhow, here is a public URL for the app:

https://app.raw-dev.com/secure/plan

Thanks!



Hi,

The video you provided does not use Metronic layout and it was confusing: https://www.loom.com/share/83e5ef5acf0d4da0be9fe518a1d6b7a2

However, the provided test URL was helpful. I tried to click on the menu to load a new page in mobile mode and the page reloading time was longer that's why the page showed for 4-5 seconds after the click and then the new page loaded. This is due to your server's slow response.

Can you please confirm if you referred to the same issue or you meant something else ?

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(