Christmas Sale! Limited Time Only - Enjoy 30% Off Metronic Extended License!
Buy for 669$  969$
Light
Dark
System
Ask  Question

Overlays & loading in Metronic - Tailwind CSS Toolkit


i can find laoding spinner option
and overlay div in Overlays & loading in Metronic - Tailwind CSS Toolkit

like we have in bootstrap thanks
https://preview.keenthemes.com/metronic/demo8/features/custom/overlay.html


user
Muhammad Adnan 3 months ago
Blazor
1 Answers
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 (1)

user
Lauris Stepanovs Author3 months ago

Hi Muhammad,

The preview you mentioned refers to Bootstrap Metronic 7, while the latest version, built with Tailwind, is Metronic 9.

You can view Metronic 9 preview here: https://keenthemes.com/metronic/tailwind/demo1/

To implement an overlay loading screen, you can use the following code:

<div class="fixed top-0 left-0 right-0 bottom-0 w-full h-screen overflow-hidden bg-gray-700 opacity-75 flex flex-col items-center justify-center">
<h2 class="text-center text-white text-xl font-semibold">Loading...</h2>
</div>


Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(