rikmms / progress-bar-4-axios Goto Github PK
View Code? Open in Web Editor NEWSlim progress bar (NProgress) for Web applications that use Axios library for HTTP requests
License: MIT License
Slim progress bar (NProgress) for Web applications that use Axios library for HTTP requests
License: MIT License
Hi,
I'm starting to use this module for an application Symfony - VueJS.
And I noticed that when I execute a POST request returning a null content, the loading bar never stops, despite the fact that the request end correctly with it's 200 http status code.
I wondered if there was a configuration that I missed, or just something I'm doing wrong.
Thanks in advance
When axios encounters a connection refused error, the progress bar doesn't disappear when the request has failed.
I want show progress bar in my specific place not top of pages. because there are my header show with position fixed property. so the "progress bar" not showing properly.
$(document).ready(function() {
loadProgressBar()
$("#test").click(function(){
console.log("mandado peticion")
axios.get('http://127.0.0.1:53330')
.then(function (response) {
renderTable(response.data)
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
});
})
I think maybe there's an issue.
I'm trying to use it with axios 0.18.0.
When I refresh the page or make a request, the loading bar starts but never ends.
Looking on devTools, all the requests are finished.
I'm setting up this way:
import { loadProgressBar } from 'axios-progress-bar'
import 'axios-progress-bar/dist/nprogress.css'
loadProgressBar({ showSpinner: false })
Not compatible with axios 1.x
Are there any forks which are compatible?
Everything seems fairly straightforward... Here is how I am instantiating the progress bar in my index.js
...
import { loadProgressBar } from 'axios-progress-bar'
const progressBarConfig = NProgress.configure({ parent: '#axios-progress-bar', showSpinner: false });
loadProgressBar(progressBarConfig);
I would have expected to see the progress bar attached to the top of my <div id="axios-progress-bar></div>
element, and the spinner is hidden. Is this not the right usage? The spinner still shows and the progress bar is still stuck to the very top of the page.
I've also tried...
import { loadProgressBar } from 'axios-progress-bar'
const progressBarConfig = { parent: '#axios-progress-bar', showSpinner: false };
loadProgressBar(progressBarConfig);
I have tried multiple things but still can't get it to work with react. It would be nice if you can add a few examples in repo showing working examples in different cases.
If response status is 201, the bar never stops.
Is there any option to block the UI while an http call is being made through axios?
Here is the error message I receive when attempting to use this module as described in the README.
ร node_modules\axios-progress-bar\dist\index.js:173:28: Cannot resolve dependency '!!../css-loader/ind 171 | nprogresif(!content.locals) {
172 | module.hot.accept("!!../css-loader/index.js!./nprogress.css", function() {
> 173 | var newContent = require("!!../css-loader/index.js!./nprogress.css");
| ^
174 | if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
175 | update(newContent);
176 | });
Hi,
How can I keep the bar once its at 100%? I like the look
Hello,
Is there a way to hide the progress bar on specific situations ?
for ex: at a certain route/ page
Regards
I made an axios custom instance and the progress bar doesn't disappear when the request ends. Looking at the source code, you are not handling custom instance, just the normal axios
instance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.