Please consider starring the project to show your ❤️ and support.

Webpack terminal information to browser.

This plugin is recommended for webpack-based app bundler.

yarn add loading-screen -D

Using poi? Go poi-plugin-loading-screen

In your webpack.config.js:

const LoadingScreenPlugin = require('loading-screen') module.exports = { plugins: [new LoadingScreenPlugin()] }

new LoadingScreenPlugin(options)

• Type: string
• Default: 'localhost'

The loading screen server host.

P.S. CANNOT be the same as the app server host.

• Type: number
• Default: process.env.port || 4000

The loading screen server port.

• Type: (req, res) => void
• DefaultBehavior: Print loading screen server message.

The loading screen server callback.

• Type: string
• Default: '/'

Similiar with webpack.output.publicPath.

• Type: url | HTML.innerHTML
• Default: 'https://webpack.js.org/assets/icon-square-big.svg' which mean is webpack logo

Set url to display your prefer logo for loading screen.

Or with regular HTML:

new LoadingScreenPlugin({ logo: '<div>my logo</div>' })

• Type: ThemeConfig
• Default: DefaultThemeConfig

Customize loading screen progress bar color.

interface ThemeConfig { client?: string server?: string modern?: string } const DefaultThemeConfig = { client: '#8ed5fb', server: '#1b78bf', modern: '#2f495e' }

• Type: 'development' | 'production'
• Default: process.env.NODE_ENV

Enable loading screen when is 'development', disable otherwise.

• Type: (per, message, ...details) => void

Progress hooks report details.

Reference: https://webpack.js.org/plugins/progress-plugin/

• Type: boolean
• Default: true

• nuxt/loading-screen

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

loading-screen © EVILLT, Released under the MIT License.

Authored and maintained by EVILLT with help from contributors (list).

evila.me · GitHub @evillt · Twitter @evillt