nicolaibye
commented
1 month ago 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; } } `
Contact form, newsletter sign up, Search *Are the places that would need some kind of indicator while the API call was taking place