https://github.com/lete114/page-load-progress
Listening to hyperlink loading progress
https://github.com/lete114/page-load-progress
hyperlink listen load loader page prefetch preload progress progress-bar
Last synced: 11 months ago
JSON representation
Listening to hyperlink loading progress
- Host: GitHub
- URL: https://github.com/lete114/page-load-progress
- Owner: Lete114
- Created: 2023-04-06T12:26:44.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-09T02:32:23.000Z (over 2 years ago)
- Last Synced: 2025-03-22T18:11:18.606Z (11 months ago)
- Topics: hyperlink, listen, load, loader, page, prefetch, preload, progress, progress-bar
- Language: JavaScript
- Homepage: https://lete114.github.io/page-load-progress/test/index.html
- Size: 44.9 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Page-Load-Progress
Let traditional ordinary websites have page loading progress when clicking a tag to jump pages
> [preview demo](https://lete114.github.io/page-load-progress/test/index.html)
## Installation
Add [page-load-progress.js](https://cdn.jsdelivr.net/npm/page-load-progress/page-load-progress.min.js) to your project.
```html
```
Or
```bash
npm install page-load-progress
```
## Basic usage
Just listen to `progress:start` and `progress:end` to control the progress
```js
// Triggered when the a tag on the page is clicked
document.addEventListener('progress:start', () => {
console.log('start')
})
// Triggered when the html file for the a tag is loaded
document.addEventListener('progress:end', () => {
console.log('end')
})
// Triggered when the html file of the a tag is loaded incorrectly
document.addEventListener('progress:error', () => {
console.log('error')
})
// When you need to filter some links that don't need a progress bar
pageLoadProgress({ ignoreKeywords: ['/logout'] })
// default: 500ms
// Delay the execution of the page jump when the `progress:end` event is triggered (used to wait for the progress bar to reach 100% animation effect)
pageLoadProgress({ defer: 500 })
```
## Add progress bar
Use [NProgress.js](https://github.com/rstacruz/nprogress/)
```js
// Triggered when the a tag on the page is clicked
document.addEventListener('progress:start', () => {
NProgress.start()
})
// Triggered when the html file for the a tag is loaded
document.addEventListener('progress:end', () => {
NProgress.done()
})
```
Here's a simple example of a progress bar
```js
!(function () {
var style = document.createElement('style')
style.textContent = `
.__progress__ {
top: 0;
left: 0;
position: fixed;
width: 10%;
height: 2px;
z-index: 103;
background-color: #e58a8a;
transition: width 0.4s ease 0s;
}`
document.head.appendChild(style)
var timer = null
document.addEventListener('progress:start', () => {
var progress = 10
var div = document.createElement('div')
div.className = '__progress__'
document.body.prepend(div)
var max = 10,
mini = 3
var result = max - mini
timer = setInterval(function () {
var num = parseInt(Math.random() * result)
var randomResult = num + mini
progress += randomResult
if (progress > 95) progress = 95
div.style.width = progress + '%'
}, 500)
})
document.addEventListener('progress:end', () => {
clearInterval(timer)
var progress = document.querySelector('.__progress__')
if (progress) progress.style.width = '100%'
setTimeout(() => {
progress.parentElement.removeChild(progress)
}, 500)
})
})()
```