在我的nextjs应用程序中加载页面时，使用nprogress和Vivus显示动画SVG

我有一个nextjs应用程序

我正在使用nprogress(https://www.npmjs.com/package/nprogress)加载页面时显示SVG图标。

我已将此代码添加到_app.js文件中。

Router.events.on('routeChangeStart', () => {
    NProgress.start();

});
Router.events.on('routeChangeComplete', () => {
    NProgress.done();
});
Router.events.on('routeChangeError', () => {
    NProgress.done();
});

然后，我为nprogress定制了CSS，以显示图标：

#nprogress .spinner {

    background-color: white;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

    #nprogress .spinner:before {
        content: "";
        display: inline-block;
        content: url("../images/myIcon.svg");
        background-color: transparent;
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        width: 250px;
        height: 250px;
    }

这是可行的，但我现在想做的是使用vivus动画化SVG(https://maxwellito.github.io/vivus/)-如何做到这一点？