Coder Social home page Coder Social logo

Comments (8)

dieulot avatar dieulot commented on June 22, 2024

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.

Voyager-Two avatar Voyager-Two commented on June 22, 2024

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.

dieulot avatar dieulot commented on June 22, 2024

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.

Voyager-Two avatar Voyager-Two commented on June 22, 2024

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.

ooxi avatar ooxi commented on June 22, 2024

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.

dieulot avatar dieulot commented on June 22, 2024

navigation_start is wait and navigation_end is change. “Navigation’s progress” should be handled by hand.

from instantclick.

ooxi avatar ooxi commented on June 22, 2024

Thanks, good to know!

from instantclick.

dieulot avatar dieulot commented on June 22, 2024

Closing this now, for any other feedback on the progress bar feel free to open another issue.

from instantclick.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.