Comments (8)
What do you think the spinner brings that the bar doesn’t?
I’d rather have only one indicator, either the bar or the spinner, but I don’t see the need for having both.
I get your point that the bar brings too much attention to itself though. Bringing its height down from 3px to 2px (like NProgress) makes it supportable for me, testing locally on InstantClick’s website. Could you replace height:3px;
by height:2px;
in the JS file and tell me what you think about it?
I also deliberately chose a default color that’s a bit more punchy than NProgress’s blue, to symbolize InstantClick’s punchiness. In hindsight I realize it’s a bad design, I’ll go with NProgress’s color, or some similar blue that draws less attention.
As for separating the CSS from the JS, I think it’s more important to make InstantClick “plug and play” than giving the trouble to add CSS too.
Thanks for bringing feedback on this.
If anyone else sees this issue and would like to bring feedback on the loading indicator (currently a progress bar) in master, I’m all ears.
I’m renaming your issue to “Feedback on the loading indicator” (from “Spinner”) to reflect that.
from instantclick.
Well look at Twitter for example... they replace their logo with a spinner when doing pjax.
I think it's much simpler and a lot less distracting.
I tried a lot of designs for the progress bar, even tried moving it to the bottom instead of the top. I think it's just too much. For a site like YouTube however, I think it's fine.
But most sites, I wouldn't recommend it.
from instantclick.
I think a progress bar is the best choice available. I don’t think that’s too much.
Twitter uses a spinner to great effect, but correctly incorporating a spinner on a website that’s already designed demands more work. The progress bar seems to be a much better default choice.
Also, in the future I’d like to show the real progress of the preloading (by checking the Content-Length header periodically, if available). This can’t be done with a spinner.
from instantclick.
Good point, I guess I'll just have to add it my self.
Thanks anyway.
I really like IC, keep up the good work.
from instantclick.
Is there a way to plug into the loading behaviour and just display the progress yourself? Like three events navigation_start
, navigation_progress
, navigation_end
?
from instantclick.
navigation_start
is wait
and navigation_end
is change
. “Navigation’s progress” should be handled by hand.
from instantclick.
Thanks, good to know!
from instantclick.
Closing this now, for any other feedback on the progress bar feel free to open another issue.
from instantclick.
Related Issues (20)
- $timers[$currentLocationWithoutHash] is undefined in addTimer HOT 1
- Uncaught SyntaxError: Unexpected token : HOT 1
- Browsing calls the xhr request multiple times HOT 2
- 'change' fired multiple times HOT 1
- If using relative path, images in target webpage is not loaded properly. HOT 1
- Instant Click loading bar width calculations are based off page width plus width of scrollbar HOT 1
- How to reload content of <head> relative to page ? HOT 3
- [QUESTION] Where I can find the CI service?
- hexo博客添加instantclick打开网页是空白
- Is this package still maintained ???? HOT 1
- Is there any React Router implementation?
- Support for Nuxt.js
- Disable if data-method exists and is not GET
- 4.0 HOT 2
- Stop menu from opening when back button is clicked
- Character encoding
- Scripts with data-no-instant get re-evaluated when pressing the back button
- utteranc.es support
- Cannot read property 'appendChild' of null
- When new page opens with different template the CSS is skipped
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from instantclick.