@silexlabs/grapesjs-loading
v1.0.9
Published
Grapesjs Loading
Downloads
361
Readme
Grapesjs Loading
Shows a loading bar while the site is loaded or saved. By default it looks like the classic loading bar on top of the page, e.g. on github.com.
This demo is not useful as it uses localstorage as storage and this is instant so the loading bar is not visible => todo: make it better DEMO This code is part of a bigger project: about Silex v3
HTML
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/@silexlabs/grapesjs-loading"></script>
<div id="gjs"></div>
JS
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['@silexlabs/grapesjs-loading'],
});
CSS
body, html {
margin: 0;
height: 100%;
}
Summary
- Plugin name:
@silexlabs/grapesjs-loading
- Shows a loading bar while the site is loaded or saved
Options
| Option | Description | Default |
|-|-|-
| option1
| Description option | default value
|
Download
- CDN
https://unpkg.com/@silexlabs/grapesjs-loading
- NPM
npm i @silexlabs/grapesjs-loading
- GIT
git clone https://github.com/silexlabs/grapesjs-loading.git
Usage
Directly in the browser
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/@silexlabs/grapesjs-loading.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['@silexlabs/grapesjs-loading'],
pluginsOpts: {
'grapesjs-loading': { /* options */ }
}
});
</script>
Modern javascript
import grapesjs from 'grapesjs';
import plugin from '@silexlabs/grapesjs-loading';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { /* options */ }
}
// or
plugins: [
editor => plugin(editor, { /* options */ }),
],
});
Development
Clone the repository
$ git clone https://github.com/silexlabs/grapesjs-loading.git
$ cd grapesjs-loading
Install dependencies
$ npm i
Start the dev server
$ npm start
Build the source
$ npm run build
License
MIT