mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-22 18:30:14 +01:00
96 lines
No EOL
6.2 KiB
HTML
96 lines
No EOL
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||
<title>ng2-admin documentation - Theme Spinner</title>
|
||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="nav-main">
|
||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||
<ul class="nav-site nav-site-internal">
|
||
<li><a href="/ng2-admin/">Home</a></li>
|
||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||
</div>
|
||
</div>
|
||
<section class="content wrap documentationContent">
|
||
<div class="nav-docs">
|
||
<div class="nav-docs section">
|
||
<h3>Quick Start</h3>
|
||
<ul>
|
||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Customization</h3>
|
||
<ul>
|
||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Components</h3>
|
||
<ul>
|
||
<li><a href="/ng2-admin/articles/016-spinner/" class="active">Theme Spinner</a></li>
|
||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="inner-content">
|
||
<h1>Theme Spinner</h1>
|
||
<div class="subHeader"></div><p>Theme Spinner <code>BaThemeSpinner</code> is a small service helper allowing you to show a preloader spinner while executing some long-running tasks.
|
||
Same spinner you can see after reloading a page - it is shown while application is initializing Anuglar 2 and loading charts and images.</p>
|
||
<p>The usage interface in quite simple, there are two public methods: <code>show</code> and <code>hide</code>.</p>
|
||
<p>Theme Spinner comes with another small helper called <code>BaThemePreloader</code>.
|
||
This service globally integrated into the application and connected to the spinner.</p>
|
||
<p>You can register any promise in any part of the application so that the spinner will be hidden only after your promise is completed (resolved).</p>
|
||
<p>You can find an example of usage inside of the <code>app.component.ts</code> file.
|
||
Here we are registering a loader (<code>this._imageLoader.load</code> just returns a <code>Promise</code>) which loads a background image:</p>
|
||
<pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._imageLoader.load(layoutPaths.images.root + <span class="string">'blur-bg-mobile.jpg'</span>));
|
||
</code></pre>
|
||
<p>Then we are starting all the registered promises and once they all are done - hiding the spinner.</p>
|
||
<pre><code class="lang-javascript"> BaThemePreloader.load().then((values) => {
|
||
<span class="keyword">this</span>._spinner.hide();
|
||
});
|
||
</code></pre>
|
||
<h2 id="example">Example</h2>
|
||
<p>You also can register a loader on any page you want.
|
||
Say you have a long-running task on the Charts page (you need to receive some data from a web service) and you want the spinner to be shown while the data is loading.</p>
|
||
<p>First thing you need to do is to import BaThemePreloader service:</p>
|
||
<pre><code class="lang-javascript"> <span class="keyword">import</span> {BaThemePreloader} <span class="keyword">from</span> <span class="string">'../../../../theme/services'</span>;
|
||
</code></pre>
|
||
<p>Then, say you have a method loading some data called <code>_loadData</code>, in our case we just mocked this method with <code>setTimeout</code> to emulate the loading process:</p>
|
||
<pre><code class="lang-javascript"> private _loadData():<span class="built_in">Promise</span><any> {
|
||
<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>((resolve, reject) => {
|
||
setTimeout(() => {
|
||
resolve();
|
||
}, <span class="number">4000</span>);
|
||
});
|
||
}
|
||
</code></pre>
|
||
<p>Last thing you need to do is to register your loader:</p>
|
||
<pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._loadData());
|
||
</code></pre>
|
||
<p>That’s basically it! Once your data is loaded and all other registered loaders are completed - the spinner will be hidden.</p>
|
||
|
||
</div>
|
||
</section>
|
||
<footer class="wrap">
|
||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||
</footer>
|
||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||
</body>
|
||
</html> |