{"id":10412,"date":"2024-03-14T12:05:25","date_gmt":"2024-03-14T12:05:25","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/"},"modified":"2025-08-03T23:12:17","modified_gmt":"2025-08-03T23:12:17","slug":"how-to-install-and-use-nprogress","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/","title":{"rendered":"Nprogress Install & Usage Guide"},"content":{"rendered":"

Nprogress is a lightweight progress bar plugin that can display a progress bar during page loading and Ajax requests. Below are the installation and usage steps for Nprogress.<\/p>\n

    \n
  1. Install nprogress with npm.<\/li>\n<\/ol>\n
    npm install nprogress\r\n<\/code><\/pre>\n
      \n
    1. Integrate the nprogress library into the project.<\/li>\n<\/ol>\n
      import<\/span> NProgress<\/span> from<\/span> 'nprogress'<\/span>;\r\n<\/code><\/pre>\n
        \n
      1. Call the NProgress.start() method to start displaying the progress bar at the desired location.<\/li>\n<\/ol>\n
        NProgress<\/span>.start<\/span>();\r\n<\/code><\/pre>\n
          \n
        1. To finish displaying the progress bar, call the NProgress.done() method after the operation is complete.<\/li>\n<\/ol>\n
          NProgress<\/span>.done<\/span>();\r\n<\/code><\/pre>\n
            \n
          1. You can customize the color, speed, and other parameters of the progress bar as needed.<\/li>\n<\/ol>\n
            NProgress<\/span>.configure<\/span>({ \r\n  minimum<\/span>: 0.1<\/span>,\r\n  speed<\/span>: 200<\/span>,\r\n  trickle<\/span>: false<\/span>,\r\n  showSpinner<\/span>: false<\/span>\r\n});\r\n<\/code><\/pre>\n
            By following the above steps, you can now use nprogress to display a progress bar in your project.<\/p>\n","protected":false},"excerpt":{"rendered":"
            Nprogress is a lightweight progress bar plugin that can display a progress bar during page loading and Ajax requests. Below are the installation and usage steps for Nprogress. Install nprogress with npm. npm install nprogress Integrate the nprogress library into the project. import NProgress from ‘nprogress’; Call the NProgress.start() method to start displaying the progress […]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[324,6505,12974,9518,326],"class_list":["post-10412","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-javascript","tag-npm","tag-nprogress","tag-progress-bar","tag-web-development"],"yoast_head":"\nNprogress Install & Usage Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn to install and use nprogress for progress bars in page loading and Ajax requests. Step-by-step tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nprogress Install & Usage Guide\" \/>\n<meta property=\"og:description\" content=\"Learn to install and use nprogress for progress bars in page loading and Ajax requests. Step-by-step tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T12:05:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-03T23:12:17+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"Nprogress Install & Usage Guide\",\"datePublished\":\"2024-03-14T12:05:25+00:00\",\"dateModified\":\"2025-08-03T23:12:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/\"},\"wordCount\":107,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"JavaScript\",\"npm\",\"nprogress\",\"Progress bar\",\"web development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/\",\"name\":\"Nprogress Install & Usage Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T12:05:25+00:00\",\"dateModified\":\"2025-08-03T23:12:17+00:00\",\"description\":\"Learn to install and use nprogress for progress bars in page loading and Ajax requests. Step-by-step tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nprogress Install & Usage Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Nprogress Install & Usage Guide - Blog - Silicon Cloud","description":"Learn to install and use nprogress for progress bars in page loading and Ajax requests. Step-by-step tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/","og_locale":"en_US","og_type":"article","og_title":"Nprogress Install & Usage Guide","og_description":"Learn to install and use nprogress for progress bars in page loading and Ajax requests. Step-by-step tutorial.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T12:05:25+00:00","article_modified_time":"2025-08-03T23:12:17+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"Nprogress Install & Usage Guide","datePublished":"2024-03-14T12:05:25+00:00","dateModified":"2025-08-03T23:12:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/"},"wordCount":107,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["JavaScript","npm","nprogress","Progress bar","web development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/","name":"Nprogress Install & Usage Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T12:05:25+00:00","dateModified":"2025-08-03T23:12:17+00:00","description":"Learn to install and use nprogress for progress bars in page loading and Ajax requests. Step-by-step tutorial.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-install-and-use-nprogress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Nprogress Install & Usage Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=10412"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10412\/revisions"}],"predecessor-version":[{"id":154171,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10412\/revisions\/154171"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=10412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=10412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=10412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}