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.

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 | |-|-|-| | appendTo | Element to append the loading bar to | document.body | | start | Whether to insert at the beginning of container | true | | style | CSS styles for the loading bar | { padding: '4px', backgroundColor: 'white', opacity: 0.6, ... } | | visibleStyle | Styles when loading bar is visible | { visibility: 'visible', width: '100%' } | | hiddenStyle | Styles when loading bar is hidden | { visibility: 'hidden', width: '0%' } |

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="https://unpkg.com/@silexlabs/grapesjs-loading"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['@silexlabs/grapesjs-loading'],
      pluginsOpts: {
        '@silexlabs/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

Build the project

$ npm run build

Start the dev server

$ npm start

License

GPL-3.0