Ui Component example

account.html

<div class="global-underlay"
     data-bind="
        css: {'global-underlay--active': state().underlayActive},
        click: close
     "
></div>
<div class="global-overlay"
     data-bind="
         css: {
             'global-overlay--active': state().overlayActive,
             'global-overlay--loading': state().loading,
             'global-overlay--ready': state().ready,
         }">
    <div class="global-overlay__loader"
        data-bind="css: {'global-overlay__loader--active': state().loading}">
        <p data-bind="text: loadingText"></p>
    </div>
    <button
        type="button"
        class="global-overlay__close"
        data-bind="click: close">
        <svg class="svg-icon"><use xlink:href="#svg-close"></use></svg>
    </button>
    <div class="global-overlay__content"
         data-ui-id="overlay-content"
         data-bind="css: {'global-overlay__content--active': state().ready}"></div>
</div>

account.js

define([
    "uiComponent",
    "jquery",
    "ko",
    "underscore",
    "mage/translate",
], function(Component, $, ko, _, $t) {
    return Component.extend({
        defaults: {
            template: 'Simmi_Theme/account.html',
            loadingText: $t('Please wait...'),
        },
        initialize: function() {
            var self = this;
            self._super();
            // any other init code here
        }
    });
});

account.phtml

<div data-bind="scope: 'accountOverlay'" id="account-overlay">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "accountOverlay": {
                        "component": "Simmi_Theme/js/account"
                    }
                }
            }
        }
    }
</script>