Youtube-like loading indicator using VueJS (NProgress)
by Sam
This tutorial will help you create loading indicator for your website specifically to Single Page Application(SPA). This loader will help your viewers understand your site’s status upon submission of form and page redirects.
Requirements:
– Installed Laravel
– Knowledge in Vuejs and vue-router
In this tutorial, we’re using Laravel 5.7 and VueJS as the front-end scaffold. Hence, you must have prior knowledge and already set-up vue router.
Get started
From your terminal, type:
$ npm install nprogress --save After installing the nprogress, go to app.js and type the scripts below the require(‘Vue’);
//You must have import VueRouter above
import '../node_modules/nprogress/nprogress.css';
const router = new VueRouter({
mode: 'history',
routes: { } //put your routes here
});
router.beforeResolve((to, from, next) => {
if (to.name) {
NProgress.start()
}
next()
});
router.afterEach((to, from) => {
NProgress.done()
});
// your codes below
Run your application to test.
$ npm run watch
$ php artisan serveThat’s all.
What if?
You encounter an error nprogress.css file not found
Solution:
Change the directory to
import '../../node_modules/nprogress/nprogress.css';Customize NProgress CSS Style
If you want to customize the progress bar, you might use the style below.
#nprogress .bar {
background: red !important;
}
#nprogress .spinner-icon {
border-left-color: green !important;
border-top-color: yellow !important;
}
If you have question, don’t hesitate to ask below.
