Integrate the loading indicators

[T0nj3]

From design-team (code at the bottom):

Hello!

I've looked at the different places for the indicators and have developed these suggestions. Essentially we will be using a soft round animated loader to fit the caring message we want to portray to the user. Here it is applied to the different places on the page.

Newsletter button:

Contact form and contact information:

I haven't seen any design for the search bar so I made a quick suggestion on this, but if that is not within the scope of this project then the loading indicator I think should be applied the same:

Further, we are going to be having a meeting discussing the Support Us page, so a loading indicator after a donation might not be necessary anymore, but if it were to be needed again here is how I imagine it being applied:

The code I found for the loader looked like this:

HTML:

<span class="loader"></span>

CSS:

`.loader {

width: 48px;

height: 48px;

display: inline-block;

position: relative;

}

.loader::after,

.loader::before {

content: '';

box-sizing: border-box;

width: 48px;

height: 48px;

border-radius: 50%;

background: #FFF;

position: absolute;

left: 0;

top: 0;

animation: animloader 2s linear infinite;

}

.loader::after {

animation-delay: 1s;

}

@keyframes animloader {

0% {

transform: scale(0);

opacity: 1;

}

100% {

transform: scale(1);

opacity: 0;

}

}

` 

Originally posted by @nicolaibye in #567

[cgrotteland92]

Hopefully what I did is OK, I put the JavaScript in general.mjs. Hope I did not make a mess of things. Maybe someone can check it out before I go any further.

[T0nj3]

Could you make a PR? We can't look at it before that :) We can still delete the PR if something is wrong!