Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2nthony/loading-screen
🚥Loading screen for webpack plugin inspired by Nuxt.js's loading screen
https://github.com/2nthony/loading-screen
it-just-works loading-screen nuxt vue webpack webpack-plugin
Last synced: about 2 months ago
JSON representation
🚥Loading screen for webpack plugin inspired by Nuxt.js's loading screen
- Host: GitHub
- URL: https://github.com/2nthony/loading-screen
- Owner: 2nthony
- License: mit
- Created: 2019-04-25T17:36:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T20:14:02.000Z (about 1 year ago)
- Last Synced: 2024-05-20T22:15:39.220Z (7 months ago)
- Topics: it-just-works, loading-screen, nuxt, vue, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 521 KB
- Stars: 58
- Watchers: 2
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
---
[](https://npmjs.com/package/loading-screen)
[](https://npmjs.com/package/loading-screen)
[](https://circleci.com/gh/evillt/loading-screen/tree/master)
[](https://patreon.com/evillt)
Please consider starring the project to show your ❤️ and support.
## Introduction
Webpack terminal information to browser.
**_This plugin is recommended for webpack-based app bundler._**
## Install
```console
yarn add loading-screen -D
```
Using poi? Go [poi-plugin-loading-screen](https://github.com/evillt/poi-plugin-loading-screen)
## Usage
In your `webpack.config.js`:
```js
const LoadingScreenPlugin = require('loading-screen')
module.exports = {
plugins: [new LoadingScreenPlugin()]
}
```
## API
`new LoadingScreenPlugin(options)`
### host
- Type: `string`
- Default: `'localhost'`
The loading screen server host.
P.S. CANNOT be the same as the app server host.
### port
- Type: `number`
- Default: `process.env.port || 4000`
The loading screen server port.
### callback
- Type: `(req, res) => void`
- DefaultBehavior: Print loading screen server message.
The loading screen server callback.
### baseURL
- Type: `string`
- Default: `'/'`
Similiar with `webpack.output.publicPath`.
### logo
- 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:
```js
new LoadingScreenPlugin({
logo: '
my logo'
})
```
### theme
- Type: `ThemeConfig`
- Default: `DefaultThemeConfig`
Customize loading screen progress bar color.
```ts
interface ThemeConfig {
client?: string
server?: string
modern?: string
}
const DefaultThemeConfig = {
client: '#8ed5fb',
server: '#1b78bf',
modern: '#2f495e'
}
```
### env
- Type: `'development' | 'production'`
- Default: `process.env.NODE_ENV`
Enable loading screen when is `'development'`, disable otherwise.
### handler
- Type: `(per, message, ...details) => void`
Progress hooks report details.
Reference: https://webpack.js.org/plugins/progress-plugin/
### showPercent
- Type: `boolean`
- Default: `true`
## Credits
- [**nuxt/loading-screen**](https://github.com/nuxt/loading-screen)
## Contributing
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
## Author
**loading-screen** © [EVILLT](https://github.com/evillt), Released under the [MIT](./LICENSE) License.
Authored and maintained by **EVILLT** with help from contributors ([list](https://github.com/evillt/loading-screen/contributors)).
> [evila.me](https://evila.me) · GitHub [@evillt](https://github.com/evillt) · Twitter [@evillt](https://twitter.com/evillt)