What is exactly displayed on the upload progress indicator?

Question

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

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%.

Answer 1

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 bug 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>