Youtube-like loading indicator using VueJS (NProgress)

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 serve

That’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.