Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including redwood-nprogress with all npm packages installed. Try it out:

require("@emotion/core/package.json"); // @emotion/core is a peer dependency. require("@redwoodjs/router/package.json"); // @redwoodjs/router is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var redwoodNprogress = require("redwood-nprogress")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

redwood-nprogress v1.0.1

Theme aware NProgress component to use in RedwoodJS apps using Emotion or ThemeUI.


Theme aware NProgress component to use in RedwoodJS apps using Emotion or ThemeUI.

This component is a fork of next-nprogress-emotion package. It was converted to use with RedwoodJS.


yarn add redwood-nprogress


npm install redwood-nprogress



Because this component relies on PageLoadingContext, it needs to be imported under each route.

It is thus recommended to use a layout to wrap each of your pages. For example:

Import the component inside your layouts/GlobalLayout;

import NProgress from 'redwood-nprogress'

const GlobalLayout = ({ children }) => {
  return (
      <NProgress />

export default GlobalLayout

Then wrap your pages in <GlobalLayout>:

import GlobalLayout from 'src/layouts/GlobalLayout/GlobalLayout'

const HomePage = () => {
  return (
      {/* page content */}

export default HomePage

If you're using ThemeUI, that's all you need to do. The component will use the primary color by default.

You can change the color using a theme color or any css color:

// using a theme color
<NProgress color="accent" />
// using css
<NProgress color="#fff" />

You can also display a small spinner with the withSpinner prop:

<NProgress withSpinner />


The page loading delay should be configured on Redwood Router itself:

// Routes.js

<Router pageLoadingDelay={300}>...</Router>

You can configure NProgress using its configuration options.

  options={{ trickleSpeed: 50 }}


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free