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



Leave a Reply

Your email address will not be published. Required fields are marked *


Need of a Website?

Maybe you're planning to build a landing page for your website. You might also have a plan to create a web application. I can offer you with an affordable but with good quality services. Don't hesitate to submit your specifications by clicking the button below.

Get Quote