NProgress
For slim progress bars like on YouTube, Medium, etc (by rstacruz)
SpinKit
A collection of loading indicators animated with CSS (by tobiasahlin)
Our great sponsors
| NProgress | SpinKit | |
|---|---|---|
| 22 | 16 | |
| 25,806 | 19,272 | |
| - | - | |
| 0.0 | 0.0 | |
| almost 2 years ago | over 3 years ago | |
| JavaScript | CSS | |
| MIT License | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
NProgress
Posts with mentions or reviews of NProgress.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-11-03.
-
How to Show Loader on Page Changes in Next.js
This package is built using another nice package that is hugely popular. That is called nprogress .
-
Building a Loading Component with ChatGPT
Use nProgress 😂
-
A href links - make browser show the loading progress when opening a new page
Hi,I experienced the same issue today and built this standalone cross-browser loading bar for Svelte / SvelteKit inspired by nprogress. Just import this FakeProgressBar.svelte component at your root +layout.svelte and voilà.
This is actually really simple to do. You can use something in your main +layout.svelte file like nprogress paired with SvelteKit’s navigating store. The navigating store value is truthy while any page is loading, and is falsy when not navigating, so you can just show the progress bar based on the truthiness of the navigating store value.
-
Create Your Own Vue Application: Authentication with Firebase
Now I want every one can access home page, the page “/about” are only open for logged users.Nprogress is a nanoscopic progress bar and I import the dependency.
-
How to build a progress bar indicator in Next.js
NProgress is a lightweight library that lets us display realistic trickle animations at the top of the viewport to indicate loading progress, instead of using an animated loading icon.
-
Any notable filipino programmer?
Rico Sta. Cruz is a Filipino software developer and open-source contributor. He has 5.7K followers on GitHub. He is the creator of pnpm (18K stars), Devhints (12K stars) and nprogress (24.3K).
-
Building a business from scratch - day 17
I used a library called nprogress and implementing it was a breeze. You can check the changes via the commit here. Now every time a route change event happens, the user gets visual feedback that we are loading in the changes.
-
next-project-template: A simple template for Next.js projects.
Page load progress bar: NProgress
-
Page Loading Progress with Next.js and Chakra UI
We all love NProgress library, but since we are already using Chakra UI which has build-in Progress and CircularProgress components let's try to build a page loading progress bar our self.
SpinKit
Posts with mentions or reviews of SpinKit.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2022-08-19.
-
10 GitHub Repositories to Become a CSS Master
Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.
View on GitHub
- 5 GitHub repositories that can help you in writing better CSS code
-
30+🔥 Awesome CSS Animation Resources
Animated Spinners
-
The Ultimate Web Developer Resources List 🔥200+ Resources
Free CSS spinners that can be used in your web projects. 1.Loading.io 2.Tobiashlin 3.Icons8.com
-
CSS Deep
SpinKit — loading spinners animated with CSS.
tobiasahlin/SpinKit - A collection of loading indicators animated with CSS
What are some alternatives?
When comparing NProgress and SpinKit you can also consider the following projects:
pace - Automatically add a progress bar to your site.
topbar - Tiny & beautiful site-wide progress indicator
nanobar - Very lightweight progress bars. No jQuery
storefront - Official theme for WooCommerce
Ladda - Buttons with built-in loading indicators.
css-loaders - A collection of loading spinners animated with CSS
Mprogress.js - Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.
progressbar.js - Responsive and slick progress bars
Spin.js - A spinning activity indicator