soc-core/src/html/elements/page_loading.html

Core sass framework based on Bootstrap

<a name="socloading"></a>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="page-header">
                <h1>Soc Loading <small>Data grids
                    <span class="label label-primary">No container</span>
                </small></h1>
            </div>
        </div>
        <div class="col-xs-12">
            <p>To show a loader, have a div element inside the 'soc-page' div with the 'loader' class. This will result in a
                spinning loader being shown when a 'is-loading' class is applied to the soc-page div. You can set the text
                of the loading window to anything you need.</p>
            <p>Below is an example of the loading spinner. You can also click the show button to see the full effect of this
                for about 5 seconds. If blocking the user interface below the loader is required an overlay can be added
                by also adding a 'soc-loader-block' div to the page. This functionality requires the app.bundle.js to be
                included in the page. </p>
        </div>

        <div class="col-xs-12">
            <div class="soc-loader demo-purpose">Loading..</div>
        </div>

        <div class="col-xs-12">
            <button class="btn button-default" id="showLoaderBtn">
                Show loader
            </button>
        </div>

        <div class="col-sm-12">
            <div class="well">
                <div class="row">
                    <div class="col-sm-12">
                        <span>emmet:
                    <pre><code>.soc-loader{Loading...}</code></pre>
                </span></div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <span>with blocking emmet:
                    <pre><code>.soc-loader-block+.soc-loader{Loading...}</code></pre>
                </span></div>
                </div>
            </div>
        </div>
    </div>
</div>