Petition to change that gnarly looking loading-spinner.gif

[goellner]

Petition to change loading-spinner.gif

The problem

Every time we log in to Craft CMS or it has to do it's thing in the background, our eyes have to experience one of the internets most copied loading spinners with its artefacts.

What do we, the people, want?

We, the people, want Pixel & Tonic to give our eyes a nicer looking loading-spinner.gif. Let us enjoy crisp edges, while we wait for stuff to happen.

When do we want it?

We can work with the next patch release or any release before that.

[engram-design]

Here's one ready to go:

@keyframes loading {
    0% {
        transform: rotate(0)
    } 100% {
        transform: rotate(360deg)
    }
}

.spinner {
    position: relative;
    pointer-events: none;
    color: transparent !important;
    min-height: 1rem;
}

.spinner:after {
    position: absolute;
    display: block;
    height: 1rem;
    width: 1rem;
    margin-top: -.5rem;
    margin-left: -.5rem;
    border-radius: 9999px;
    animation: loading .5s linear infinite;
    border-color: transparent transparent #e5422b #e5422b;
    border-style: solid;
    border-width: 2px;
    content: "";
    left: 50%;
    top: 50%;
    z-index: 1;
}

.btn.submit.spinner {
    color: transparent !important;
}

Pros:

• No additional HTTP requests to fetch gif files
• Responsive and retina-ready
• Flexible - change the size and color in CSS
• Can be used on buttons .btn .spinner and replaces text with a spinner

[brandonkelly]

Been meaning to pull the plugin store spinner into the rest of the CP.

Pretty sure that horrendous thing in the OP is not our own CSS though!

[goellner]

If the plugin store spinner is the same one as the update spinner, we should talk about that one too:

[brandonkelly]

Nope, was referring to this one:

[nickdunn]

If the plugin store spinner is the same one as the update spinner, we should talk about that one too:

Oh the antialiased edged on the wrong background colour make me so sad here. Is this gif used in different places on different backgrounds?

[brandonkelly]

Just fixed the look of spinners when positioned over the BG color: