7 ms·

LoaderShip – CSS-Only Loaders

207 points by thm 3y ago

csiegert 3y ago
The activity indicators look nice and the configurator is great! Bookmarked.
tmikaeld 3y ago
This is great, it even has a configurator: https://www.loadership.com/loaders/dot_circular_scale https://www.loadership.com/loaders/dot_circular_scale Thanks for sharing!
TekMol 3y ago
I wish loaders would provide some feedback on what is going on. So often, I look at a loader and think "How long will it take? Is it actually still doing something? Or should I try to reload the page?". Also, I often wonder why developers put tools like this on an extra domain instead of just putting it on a page or subdomain on their personal domain. Is there a reason for this that I am missing?
- mcny 3y ago
  1. It gets worse. Often in aspdotnet we have programmers who will only remove loader on success so you could get a 500 internal server error response and the loader never goes away. 2. I think it makes it easier to get to your website without having to use search and it is easy to share like are we web yet dot org
  - kevincox 3y ago
    Yeah, lack of error notification in general is a huge problem with many UIs. It is worse than the other common problem of showing "no results" until the actual results load in.
  - teh_klev 3y ago
    > Often in aspdotnet we have programmers Pretty sure this is a problem across many other development platforms. Odd that you singled out aspdotnet programmers.
    - mcny 3y ago
      > Odd that you singled out aspdotnet programmers. I was talking about myself but didn't want to admit I am the problem. (:
      - teh_klev 3y ago
        Ah, ok :) Don't be so hard on yourself, even after 20+ years of .NET dev there are still things I can be a bit forgetful about, such as this UI annoyance.
- jefozabuss 3y ago
  Sometimes I see additional messages pop up next to loaders after certain times passed. Personally if I load from multiple endpoints at the same time I usually add a ##% in the middle of my loading circle calculated based on total and ongoing requests.
- kasbah 3y ago
  "Reticulating splines"
- dspillett 3y ago
  > I wish loaders would provide some feedback on what is going on. Often there isn't much feedback that it is easy for the client-side to give, it doesn't get any feedback until the first byte arrives in response and the time between request and first byte is far more significant than the rest of the transfer. For things like file uploads/downloads proper progress is very useful and it is irritating when that isn't present (uploading photos to facebook on a slow connection for one example). Client-side things like number crunching too. One problem you see sometimes where things can be easily monitored and the user informed, is that developers neglect to test in less than ideal conditions. The process works within a second on their devices and connections so they don't think to include a progress indicator, it is only when someone tried the result on something slower (an old slow CPU over a patchy mobile connection) that this becomes apparent. Also more detailed progress information is on the “nice to have” list so gets passed over in favour of bug fixes and other feature updates. > I often wonder why developers put tools like this on an extra domain instead of I think just fashion/appearances. It may also be an SEO thing (short URLs doing better there?).
- duxup 3y ago
  At least as far as the web goes: I agree generally but things like "How long should it take?" is more about your internet speeds / consistency, or very odd unforeseen issues on the back end, and frankly there's no amount of goofing around with even more code on your computer to determine local internet issues ... will tell me any number that makes sense. The only time calculating "how long" is under ideal circumstances (and at that point nobody cares) or say very predictable large back end workloads. As soon as things get variable, I can't give you a reasonable number. Sorry if that is a bit of a jumble of words and ideas there, I'm actually taking a break from troubleshooting this exact kind of issue. Customer has varying weird internet issues, wants to know "how long" ... bro wat?
fayazara 3y ago
Looking good, I've been using these recently - https://github.com/n3r4zzurr0/svg-spinners https://github.com/n3r4zzurr0/svg-spinners Will give these a try for my next project
- asimpletune 3y ago
  I think that's the first time I've seen SMIL outside of an SVG spec
nullzzz 3y ago
Looks great. Who’s behind this tho? Could not find anything on the authors.
- csiegert 3y ago
  The About page (link top right) says “Loadership is a side project of Jingcheng Chen” and links to https://chen.works/ https://chen.works/
namanyayg 3y ago
[flagged]
RileyJames 3y ago
I did assume this was a webpack or otherwise package for loading css libraries. Took me a while to work out what it actually was. Probably because I’ve had such headaches with webpack within rails and would love something to make it disappear (yes I know there are newer solutions but each one breaks things in new and unique ways).
- kevincox 3y ago
  Yeah. I also had to get down past all of their points before I saw the images to understand what this is. And one of the points ironically said that it didn't waste my time. I've never heard the term "loader" being used here. Since a loader would be something that loads. These don't load anything, they just indicate that loading us happening. I typically call these "spinners" or sometimes "throbers" as that is what they do. I would strongly recommend write "loading spinners" into one of the first sentences on the page.
  - RileyJames 3y ago
    Yes. Loading spinner. Loading indicator. Loading bar. I associated 'css-loader' with a Webpack loader for css: https://webpack.js.org/loaders/#styling https://webpack.js.org/loaders/#styling
Rygian 3y ago
There is some irony to the fact that this page does not even show a loader icon if javascript is disabled.
richrichardsson 3y ago
To the authors: Block Grid Scale with a block gap is outside the frame (upwards and left) by the gap amount.
lwhi 3y ago
Should we even bother with loaders? .. how can we load assets and carry out transactions that have async behaviour in another way? Maybe load in the background or show some other content while a long operation is taking place?
eole666 3y ago
The big "Get started" button does nothing (or maybe show a modal and close it really quickly). This is a good way to scare users away. The loaders are nice thought.
elaus 3y ago
Not specific to the submission, but I've basically lost all trust in loading spinners. Too many websites keep showing the loading animation indefinitely if anything unexpected fails (invalid response from backend, broken connection, …). It's not even a problem with the concept itself (binary is/isn't loading), it's just bad implementations that have ruined it for me subconsciously.
- 9dev 3y ago
  And it’s so easy: loading = true try { await fetch(…) } finally { loading = false } …while the error bubbles up to some global handler. This is such a low hanging fruit for the user experience…
  - JoeyJoJoJr 3y ago
    To be fair, it usually starts out that easy, until you require multiple fetch requests and conditional logic for separate CRUD operations.
    - internetter 3y ago
      I've worked in codebases where this bubbling is trivial, and ones where its impossible. The key is abstractions.
JimDabell 3y ago
This just ends up putting a stack of empty divs into your page. Use SVG instead of trying to abuse HTML to draw things. SVG is literally designed for this, you should use the right tool for the job.
unkoman 3y ago
I would love to see old load-bars instead as well.
rgmerk 3y ago
Heh. I saw “loader” and was expecting a reimplementation of the Ocean Loader: https://youtu.be/njTxV8blffc?si=HxTbACcLCZYDmvig https://youtu.be/njTxV8blffc?si=HxTbACcLCZYDmvig
arnorhs 3y ago
Agree with some of the other commentors that I don't associate "loader" with progress indicators / spinners. The preferred term for these in my book is "loading indicator" A lot of these terms are overloaded already. Android made it esp. bad by using "spinner" for a dropdown box, and then they used progress indicator for things that normally you'd use "spinner" for. Ultimately a "spinner" isn't really a good term since not all loading indicators spin. I might remember seeing the term "loader" in the jQuery days, but I haven't seen it used that way for a while.
- nkrisc 3y ago
  GUI components called spinners were called so because they originally resembled physical controls which had options printed on a barrel, which was then mounted below the dashboard surface with a slot to reveal the current selection, and had a ridged wheel exposed so you could spin it. Most GUIs now show you all options at once because they can and it’s better.
internetter 3y ago
I feel like skeletons are much better than loaders. I never used them until recently (I have had the displeasure of using an API that takes 700ms+ per request for critical pathways) and the change was jarring until I used skeletons, now it feels 2x faster!
Uptrenda 3y ago
It would be more useful if you could show progress %.
deleted 3y ago
[deleted]
billnreed 3y ago
I made a few CSS-only single `div` loaders a while back, it was a fun challenge to make them interesting while only using a single div. https://codepen.io/snowbillr/pen/QEagmW https://codepen.io/snowbillr/pen/QEagmW
- yoavm 3y ago
  these are really great, thanks for sharing! love the simplicity.
- AnyTimeTraveler 3y ago
  These are absolutely beautiful. I can't seem to find a license anywhere. Are they public domain?
  - billnreed 3y ago
    Thank you! No license or anything, just go for it if you want to use them.
YoshiRulz 3y ago
The only good spinner (and don't forget to include something for screen readers[1]): <progress></progress> Works in every browser, and out-of-the-box is visually consistent with the rest of the system. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#describing_a_particular_region https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pr...
- duxup 3y ago
  Except it looks like a progress bar that isn't actually indicating progress ... that seems off to me.
  - deathanatos 3y ago
    Most UI toolkits I've used have a notion of an "indefinite" progress bar. In the past these have sometimes done like a horizontal barber pole animation. In fact, I have memories of the one in Thunderbird doing this; it would be a normal progress bar while the email's data was sent, and transition to an indefinite bar while it awaited the server's response. After all … there's no "max" or "value" to the progress … we're just waiting for a singular response. Windows, in the glassy Vista era, had a green one that would shimmer & slide a small faded green blob (for lack of a better word) across the bar. (IMO better than what Explorer did for years, which was to show a definite progress bar, i.e., one with a shaded portion indicating some % completion … and then just lie about it. It would just fill the bar up with an exponential decay towards 100%, but never actually get there … and was really just an animation.)
    - duxup 3y ago
      I agree that it is a common pattern. I just find it off. Also awkward to use as a horizontal bar to show progress has to be somewhat wide, usually way wider than a spinner. The lying thing is an issue, but I don't see much difference between a bar lying and a bar that ... by design is not a progress bar / not telling the truth?
- eddd-ddde 3y ago
eddd-ddde 3y ago
Lately my internet connection has been ridiculously bad. It made me realise how often UX is ignored for bad connections. One of the things I notice with SPAs is that since the browser navigation does not occur normally, I get no indication from my browser that a link is loading, so the app is completely responsible of adding their own navigation indicators (which is uncommon to see in the wild). Also sort of unrelated, I constantly see search forms that are "real time" but do not even abort previous requests, so to me it appears as no feed back, then once I finish typing I get a new set of results every second or so until it completes, making it extremely frustrating.
- gregmac 3y ago
  So much of this is because developers work on high-end systems with a ridiculously fast internet connection (whether at home or work). It isn't super-hard to fix this, but does take effort/time/money. For example, test on slow devices on slow connections. There are proxies that can throttle and introduce latency, or even let random connections timeout. There's a catch-22 here though: doing this early in a product's life probably doesn't make sense as it's almost certainly better to focus your efforts on creating the product. But the longer you wait, the harder (== more time-consuming == more expensive) it is -- there's more architecture to change, there's complex page logic that eg didn't account for potential timeouts while doing a callback to validate something entered in a text box is unique, etc.
  - tomxor 3y ago
    There really is very little excuse for it, throttling is built right into the dev tools of both Chromium and Firefox, it's a couple of clicks away. It's as important as cross browser testing and easier to do. Another thing I've noticed a lot of sites are very poorly optimised for is latency. HTTP 1.1 is already poor in this regard due to the number of round trips required for setup, and when you start chaining these together latency becomes highly magnified, especially if they aren't on the same domain and you need a whole new HTTP setup for each step in the chain. Even with HTTP 1.1 this can be minimised by looking at the chain of requests and reorganising them to be less dependent on each other. When your latency is in the single digits and it get's multiplied by 10, that's at most 100ms, now go to mobile and it's 400ms, now in the worst case a low bandwidth connection like ADSL (which will affect latency when the weight of each request is high) or a distant connection on a different continent and you can easily get into 10s of seconds. I find this one the most annoying because the fundamental problem is poor utilisation of the connection, they don't even need to change the size of the payload, there are simply long periods when the browser is waiting to find out what to do next and the connection is mostly idle.
peyloride 3y ago
Looks very cool, thanks for sharing!
- deleted 3y ago
  [deleted]
smaudet 3y ago
Issue I noted: I couldn't make the square go from bottom to top, or right to left, only top down or left to right: https://www.loadership.com/loaders/block_grid_scale https://www.loadership.com/loaders/block_grid_scale 270 degrees or 180 should achieve this effect but seem to be aliased instead...
madrox 3y ago
I've been frequently fascinated by is loading screen UX. How we choose to present loading can have a huge impact on how a customer views a product. For example, if you have a bespoke loading icon, users will tend to think the issue with with your product and not the underlying system. If you use a default system loading icon, they'll blame their phone/OS/wifi. These days, cutting edge loading UX means placeholders: https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e https://uxdesign.cc/stop-using-a-loading-spinner-theres-some...
redder23 3y ago
The linear dot wave is a great example to show the difference between linear and cubic bezier. Its basically ruins the hole thing if you use linear animation.
atjoslin 3y ago
<3 <3 <3 <3 THANK YOU
krunck 3y ago
[flagged]
- 0x457 3y ago
  This for cases when you don't have an idea how long is left.
- gregmac 3y ago
  Have those ever existed? https://xkcd.com/612/ https://xkcd.com/612/ Think of an app doing an AJAX call to load something from a database: 1. App sends HTTP request 2. Load balancer gets request, sends it to actual server (or lambda or whatever) 3. Server gets request, makes database query 4. Database gets query, executes it against data 5. Data is returned to server 6. Server returns to load balancer 7. Load balancer returns data to client Every single one of those points is a potential delay, and a potential failure point, and unpredictable. You don't know if the servers are heavily loaded or not, or if something is containerized and doing a cold start. You don't know if your query is going to return 1KB or 1GB of data. It's not that it isn't possible to do something better than a spinner, but it's a really hard problem to predict "done". In most cases -- for example if your 95th percentile response time is <200ms -- the cost to do it doesn't justify the effort.
- recursive 3y ago
  The work started getting done on other computers, and progress became unmeasurable.
pmdr 3y ago
Glad we got the loaders sorted out. Now if only there were a website for 'Oops', 'Something went wrong', 'Uh oh' and similar messages instead for (God forbid) actual informative error messages.
Rucadi 3y ago
This is genius, thanks.

207 points by thm 3y ago

The activity indicators look nice and the configurator is great! Bookmarked.

This is great, it even has a configurator: https://www.loadership.com/loaders/dot_circular_scale https://www.loadership.com/loaders/dot_circular_scale Thanks for sharing!

TekMol 3y ago

I wish loaders would provide some feedback on what is going on. So often, I look at a loader and think "How long will it take? Is it actually still doing something? Or should I try to reload the page?". Also, I often wonder why developers put tools like this on an extra domain instead of just putting it on a page or subdomain on their personal domain. Is there a reason for this that I am missing?

mcny 3y ago
1. It gets worse. Often in aspdotnet we have programmers who will only remove loader on success so you could get a 500 internal server error response and the loader never goes away. 2. I think it makes it easier to get to your website without having to use search and it is easy to share like are we web yet dot org
- kevincox 3y ago
  Yeah, lack of error notification in general is a huge problem with many UIs. It is worse than the other common problem of showing "no results" until the actual results load in.
- teh_klev 3y ago
  > Often in aspdotnet we have programmers Pretty sure this is a problem across many other development platforms. Odd that you singled out aspdotnet programmers.
  - mcny 3y ago
    > Odd that you singled out aspdotnet programmers. I was talking about myself but didn't want to admit I am the problem. (:
    - teh_klev 3y ago
      Ah, ok :) Don't be so hard on yourself, even after 20+ years of .NET dev there are still things I can be a bit forgetful about, such as this UI annoyance.
jefozabuss 3y ago
Sometimes I see additional messages pop up next to loaders after certain times passed. Personally if I load from multiple endpoints at the same time I usually add a ##% in the middle of my loading circle calculated based on total and ongoing requests.
kasbah 3y ago
"Reticulating splines"
dspillett 3y ago
> I wish loaders would provide some feedback on what is going on. Often there isn't much feedback that it is easy for the client-side to give, it doesn't get any feedback until the first byte arrives in response and the time between request and first byte is far more significant than the rest of the transfer. For things like file uploads/downloads proper progress is very useful and it is irritating when that isn't present (uploading photos to facebook on a slow connection for one example). Client-side things like number crunching too. One problem you see sometimes where things can be easily monitored and the user informed, is that developers neglect to test in less than ideal conditions. The process works within a second on their devices and connections so they don't think to include a progress indicator, it is only when someone tried the result on something slower (an old slow CPU over a patchy mobile connection) that this becomes apparent. Also more detailed progress information is on the “nice to have” list so gets passed over in favour of bug fixes and other feature updates. > I often wonder why developers put tools like this on an extra domain instead of I think just fashion/appearances. It may also be an SEO thing (short URLs doing better there?).
duxup 3y ago
At least as far as the web goes: I agree generally but things like "How long should it take?" is more about your internet speeds / consistency, or very odd unforeseen issues on the back end, and frankly there's no amount of goofing around with even more code on your computer to determine local internet issues ... will tell me any number that makes sense. The only time calculating "how long" is under ideal circumstances (and at that point nobody cares) or say very predictable large back end workloads. As soon as things get variable, I can't give you a reasonable number. Sorry if that is a bit of a jumble of words and ideas there, I'm actually taking a break from troubleshooting this exact kind of issue. Customer has varying weird internet issues, wants to know "how long" ... bro wat?

fayazara 3y ago

Looking good, I've been using these recently - https://github.com/n3r4zzurr0/svg-spinners https://github.com/n3r4zzurr0/svg-spinners Will give these a try for my next project

asimpletune 3y ago
I think that's the first time I've seen SMIL outside of an SVG spec

nullzzz 3y ago

Looks great. Who’s behind this tho? Could not find anything on the authors.

csiegert 3y ago
The About page (link top right) says “Loadership is a side project of Jingcheng Chen” and links to https://chen.works/ https://chen.works/

namanyayg 3y ago

[flagged]

RileyJames 3y ago

I did assume this was a webpack or otherwise package for loading css libraries. Took me a while to work out what it actually was. Probably because I’ve had such headaches with webpack within rails and would love something to make it disappear (yes I know there are newer solutions but each one breaks things in new and unique ways).

kevincox 3y ago
Yeah. I also had to get down past all of their points before I saw the images to understand what this is. And one of the points ironically said that it didn't waste my time. I've never heard the term "loader" being used here. Since a loader would be something that loads. These don't load anything, they just indicate that loading us happening. I typically call these "spinners" or sometimes "throbers" as that is what they do. I would strongly recommend write "loading spinners" into one of the first sentences on the page.
- RileyJames 3y ago
  Yes. Loading spinner. Loading indicator. Loading bar. I associated 'css-loader' with a Webpack loader for css: https://webpack.js.org/loaders/#styling https://webpack.js.org/loaders/#styling

Rygian 3y ago

There is some irony to the fact that this page does not even show a loader icon if javascript is disabled.

richrichardsson 3y ago

To the authors: Block Grid Scale with a block gap is outside the frame (upwards and left) by the gap amount.

lwhi 3y ago

Should we even bother with loaders? .. how can we load assets and carry out transactions that have async behaviour in another way? Maybe load in the background or show some other content while a long operation is taking place?

eole666 3y ago

The big "Get started" button does nothing (or maybe show a modal and close it really quickly). This is a good way to scare users away. The loaders are nice thought.

elaus 3y ago

Not specific to the submission, but I've basically lost all trust in loading spinners. Too many websites keep showing the loading animation indefinitely if anything unexpected fails (invalid response from backend, broken connection, …). It's not even a problem with the concept itself (binary is/isn't loading), it's just bad implementations that have ruined it for me subconsciously.

9dev 3y ago
And it’s so easy: loading = true try { await fetch(…) } finally { loading = false } …while the error bubbles up to some global handler. This is such a low hanging fruit for the user experience…
- JoeyJoJoJr 3y ago
  To be fair, it usually starts out that easy, until you require multiple fetch requests and conditional logic for separate CRUD operations.
  - internetter 3y ago
    I've worked in codebases where this bubbling is trivial, and ones where its impossible. The key is abstractions.

JimDabell 3y ago

This just ends up putting a stack of empty divs into your page. Use SVG instead of trying to abuse HTML to draw things. SVG is literally designed for this, you should use the right tool for the job.

unkoman 3y ago

I would love to see old load-bars instead as well.

rgmerk 3y ago

Heh. I saw “loader” and was expecting a reimplementation of the Ocean Loader: https://youtu.be/njTxV8blffc?si=HxTbACcLCZYDmvig https://youtu.be/njTxV8blffc?si=HxTbACcLCZYDmvig

arnorhs 3y ago

Agree with some of the other commentors that I don't associate "loader" with progress indicators / spinners. The preferred term for these in my book is "loading indicator" A lot of these terms are overloaded already. Android made it esp. bad by using "spinner" for a dropdown box, and then they used progress indicator for things that normally you'd use "spinner" for. Ultimately a "spinner" isn't really a good term since not all loading indicators spin. I might remember seeing the term "loader" in the jQuery days, but I haven't seen it used that way for a while.

nkrisc 3y ago
GUI components called spinners were called so because they originally resembled physical controls which had options printed on a barrel, which was then mounted below the dashboard surface with a slot to reveal the current selection, and had a ridged wheel exposed so you could spin it. Most GUIs now show you all options at once because they can and it’s better.

internetter 3y ago

I feel like skeletons are much better than loaders. I never used them until recently (I have had the displeasure of using an API that takes 700ms+ per request for critical pathways) and the change was jarring until I used skeletons, now it feels 2x faster!

Uptrenda 3y ago

It would be more useful if you could show progress %.

deleted 3y ago

[deleted]

billnreed 3y ago

I made a few CSS-only single `div` loaders a while back, it was a fun challenge to make them interesting while only using a single div. https://codepen.io/snowbillr/pen/QEagmW https://codepen.io/snowbillr/pen/QEagmW

yoavm 3y ago
these are really great, thanks for sharing! love the simplicity.
AnyTimeTraveler 3y ago
These are absolutely beautiful. I can't seem to find a license anywhere. Are they public domain?
- billnreed 3y ago
  Thank you! No license or anything, just go for it if you want to use them.

YoshiRulz 3y ago

The only good spinner (and don't forget to include something for screen readers[1]): <progress></progress> Works in every browser, and out-of-the-box is visually consistent with the rest of the system. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#describing_a_particular_region https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pr...

duxup 3y ago
Except it looks like a progress bar that isn't actually indicating progress ... that seems off to me.
- deathanatos 3y ago
  Most UI toolkits I've used have a notion of an "indefinite" progress bar. In the past these have sometimes done like a horizontal barber pole animation. In fact, I have memories of the one in Thunderbird doing this; it would be a normal progress bar while the email's data was sent, and transition to an indefinite bar while it awaited the server's response. After all … there's no "max" or "value" to the progress … we're just waiting for a singular response. Windows, in the glassy Vista era, had a green one that would shimmer & slide a small faded green blob (for lack of a better word) across the bar. (IMO better than what Explorer did for years, which was to show a definite progress bar, i.e., one with a shaded portion indicating some % completion … and then just lie about it. It would just fill the bar up with an exponential decay towards 100%, but never actually get there … and was really just an animation.)
  - duxup 3y ago
    I agree that it is a common pattern. I just find it off. Also awkward to use as a horizontal bar to show progress has to be somewhat wide, usually way wider than a spinner. The lying thing is an issue, but I don't see much difference between a bar lying and a bar that ... by design is not a progress bar / not telling the truth?
eddd-ddde 3y ago

eddd-ddde 3y ago

Lately my internet connection has been ridiculously bad. It made me realise how often UX is ignored for bad connections. One of the things I notice with SPAs is that since the browser navigation does not occur normally, I get no indication from my browser that a link is loading, so the app is completely responsible of adding their own navigation indicators (which is uncommon to see in the wild). Also sort of unrelated, I constantly see search forms that are "real time" but do not even abort previous requests, so to me it appears as no feed back, then once I finish typing I get a new set of results every second or so until it completes, making it extremely frustrating.

gregmac 3y ago
So much of this is because developers work on high-end systems with a ridiculously fast internet connection (whether at home or work). It isn't super-hard to fix this, but does take effort/time/money. For example, test on slow devices on slow connections. There are proxies that can throttle and introduce latency, or even let random connections timeout. There's a catch-22 here though: doing this early in a product's life probably doesn't make sense as it's almost certainly better to focus your efforts on creating the product. But the longer you wait, the harder (== more time-consuming == more expensive) it is -- there's more architecture to change, there's complex page logic that eg didn't account for potential timeouts while doing a callback to validate something entered in a text box is unique, etc.
- tomxor 3y ago
  There really is very little excuse for it, throttling is built right into the dev tools of both Chromium and Firefox, it's a couple of clicks away. It's as important as cross browser testing and easier to do. Another thing I've noticed a lot of sites are very poorly optimised for is latency. HTTP 1.1 is already poor in this regard due to the number of round trips required for setup, and when you start chaining these together latency becomes highly magnified, especially if they aren't on the same domain and you need a whole new HTTP setup for each step in the chain. Even with HTTP 1.1 this can be minimised by looking at the chain of requests and reorganising them to be less dependent on each other. When your latency is in the single digits and it get's multiplied by 10, that's at most 100ms, now go to mobile and it's 400ms, now in the worst case a low bandwidth connection like ADSL (which will affect latency when the weight of each request is high) or a distant connection on a different continent and you can easily get into 10s of seconds. I find this one the most annoying because the fundamental problem is poor utilisation of the connection, they don't even need to change the size of the payload, there are simply long periods when the browser is waiting to find out what to do next and the connection is mostly idle.

peyloride 3y ago

Looks very cool, thanks for sharing!

deleted 3y ago
[deleted]

smaudet 3y ago

Issue I noted: I couldn't make the square go from bottom to top, or right to left, only top down or left to right: https://www.loadership.com/loaders/block_grid_scale https://www.loadership.com/loaders/block_grid_scale 270 degrees or 180 should achieve this effect but seem to be aliased instead...

madrox 3y ago

I've been frequently fascinated by is loading screen UX. How we choose to present loading can have a huge impact on how a customer views a product. For example, if you have a bespoke loading icon, users will tend to think the issue with with your product and not the underlying system. If you use a default system loading icon, they'll blame their phone/OS/wifi. These days, cutting edge loading UX means placeholders: https://uxdesign.cc/stop-using-a-loading-spinner-theres-something-better-d186194f771e https://uxdesign.cc/stop-using-a-loading-spinner-theres-some...

redder23 3y ago

The linear dot wave is a great example to show the difference between linear and cubic bezier. Its basically ruins the hole thing if you use linear animation.

atjoslin 3y ago

<3 <3 <3 <3 THANK YOU

krunck 3y ago

[flagged]

0x457 3y ago
This for cases when you don't have an idea how long is left.
gregmac 3y ago
Have those ever existed? https://xkcd.com/612/ https://xkcd.com/612/ Think of an app doing an AJAX call to load something from a database: 1. App sends HTTP request 2. Load balancer gets request, sends it to actual server (or lambda or whatever) 3. Server gets request, makes database query 4. Database gets query, executes it against data 5. Data is returned to server 6. Server returns to load balancer 7. Load balancer returns data to client Every single one of those points is a potential delay, and a potential failure point, and unpredictable. You don't know if the servers are heavily loaded or not, or if something is containerized and doing a cold start. You don't know if your query is going to return 1KB or 1GB of data. It's not that it isn't possible to do something better than a spinner, but it's a really hard problem to predict "done". In most cases -- for example if your 95th percentile response time is <200ms -- the cost to do it doesn't justify the effort.
recursive 3y ago
The work started getting done on other computers, and progress became unmeasurable.

pmdr 3y ago

Glad we got the loaders sorted out. Now if only there were a website for 'Oops', 'Something went wrong', 'Uh oh' and similar messages instead for (God forbid) actual informative error messages.

Rucadi 3y ago

This is genius, thanks.