6

After updating the image upload dialog I can't actually understand what is exactly displayed on the image upload indicator.

upload circle

For me it looks like some randomly distributed points on the rotated circle. Is there some kind of background of this animation origin?

This was tested on Windows 7 and Firefox 64.0 with scale factor 100%.

|improve this question
  • 2
    Maybe the video drivers are out of date. Can you try to reproduce without hardware acceleration: support.mozilla.org/en-US/kb/… – rene Jan 8 at 19:19
  • 1
    @rene disabling hw acceleration change nothing. Has tried after restart the FF. – αλεχολυτ Jan 8 at 19:25
  • 1
    I repro-ed now on an NVIDIA GeForce GT 620 driver: 23.21.13.8813 (Windows 10 OS) – rene Jan 8 at 19:28
  • What's yer zoom level? Also, what's wrong with this image – Won't Jan 8 at 19:54
5

tl;dr A normal spinner

I tried to find this out by looking on how this spinner is generated. Fortunately Stack Exchange documented their styles quite well on stackoverflow.design. They developed a framework called Stacks.

This button style is generated by the class is-loading. At first I looked whether it is an SVG but it uses an other trick.

They generate an pseudo-element (::before) on the button that contains the following code:

.s-btn.is-loading::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    width: 16px;
    height: 16px;
    margin-left: -1.65em;
    margin-left: -22px;
    border: 2px dotted rgba(57,115,157,.4);
    border-left-color: #33658a;
    border-radius: 50%;
    animation: spinnerRotate .8s infinite linear;
}

This should generate a rotating circle with equally distributed dots, like in this zoomed in picture:

I just tried the image uploader and it seems like I can't reproduce this problem. Therefore I think it is a only ocurring in certain browsers. Maybe consider changing your question to a bug-report or start a new question.

I have put the important code in a snippet. If you execute this snippet you should see the same effect. (If you don't want to try the image uploader) 

.loader::before {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  margin-left: -1.65em;
  margin-left: -22px;
  border: 2px dotted rgba(57, 115, 157, .4);
  border-left-color: #33658a;
  border-radius: 50%;
  animation: spinnerRotate .8s infinite linear;
}

.loader {
  padding-left: 2.2em;
  position: relative;
}

@keyframes spinnerRotate {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(359deg)
  }
}
<div class="loader">&larr; Loader</div>

|improve this answer
  • I think the blur/grey that is added on click might as well contribute to the "awkward" rendering of the CSS animation – rene Jan 8 at 19:00
  • @rene I wouldn't be so sure about this. If you look here. I can't reproduce the problem on any of the button variants, not even on the disabled ones. – MEE was the missing bracket Jan 8 at 19:02
  • They also seem fine to me. So no repro on chrome for sure. – rene Jan 8 at 19:05
  • Neither on Firefox and Chrome for iOS. Let’s see what the OP has for a browser/system. @rene – MEE was the missing bracket Jan 8 at 19:07
  • Your loader from the snippet looks almost the same as SE indicator for me in FF. Chrome browser displays the both indicators in more clear way. – αλεχολυτ Jan 8 at 19:21
  • @älёxölüt yes it is intended as a simple way to reproduce the problem without uploading tons of images to Imgur. They use basically the same code. // Strange probably it is some unlucky software and hardware combination. – MEE was the missing bracket Jan 8 at 19:24
  • 1
    it is definitely an issue in FF on older hardware: i.stack.imgur.com/WWhYU.png, this is on an NVidia GeForce GT620. – rene Jan 8 at 19:26
  • 1
    @rene please send me a modern hardware on my next bday :) What hw is considered old? – αλεχολυτ Jan 8 at 19:28
  • @rene okay. Could YOU edit this to my answer? I am currently on mobile and editing markdown is really hard. :) – MEE was the missing bracket Jan 8 at 19:29
  • @rene my GPU is much older than yours, but in the same time is more productive. – αλεχολυτ Jan 8 at 19:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .