Loading indicators

[MohammedAbi]

Clarify Requirements

• [ ] Discuss requirements for loading indicators
• [x] Identify critical areas/pages for loading indicators

Research and Gather Information

• [x] Research best practices for loading indicators
• [x] Collect examples from other websites

Design Phase

• [ ] Create visual mockups of loading indicators
• [ ] Review designs with the team and collect feedback

Planning Implementation

• [ ] Identify integration points in the codebase

Implementation

• [ ] Develop the loading indicators as per the specifications
• [ ] Test the indicators across different browsers and devices

[MohammedAbi]

Hi @taraolivia, is this a good plan for loading indicators? Should I do anything else? It's my first task, and I'm a bit unsure about what to do next.

[taraolivia]

Hi @taraolivia, is this a good plan for loading indicators? Should I do anything else? It's my first task, and I'm a bit unsure about what to do next.

Hi, Mohammed! Thanks for the tag, I have now had a chance to look at your work. This looks like an amazing plan for the plan! I do think that the tasks need answers as well for the task to be done, before the developing starts :D Maybe this should be worked on continuously, and in collaboration with Design.

I think this task will be done on your part when all the checkboxes are checked off, and the answers are filled in here: (except for design) https://noroff-my.sharepoint.com/personal/tarbjo01657_stud_noroff_no/_layouts/OneNote.aspx?id=%2Fpersonal%2Ftarbjo01657_stud_noroff_no%2FDocuments%2FNotatblokker%2FMusikk%20Forandrer%20Liv&wd=target%28Project%20Documentation.one%7CCB16F8C6-9AC2-4B83-B7EB-D0CEDC245FA1%2FLoading%20indicators%7CF1252B2E-8516-4424-85C3-1EECB5BA40A9%2F%29

Is it possible for you to do the other areas, before the design team have finished their work on it?

Let me know what you think 😄

[MohammedAbi]

I completely agree. I will focus on clarifying requirements and researching and gathering information on best practices for loading indicators.

Unfortunately, I am at work during our common review sessions and am not available until at least 5:00 PM on weekdays. I will let you know when I believe the design team can take over.

[MohammedAbi]

I have completed the plan for implementing loading indicators based on the outlined checkpoints. Here is a summary of the process and findings: Plan for loading indicators

[idatold]

Hi! I found a loading indicator that we think works with the page.

The link to the page: https://uiverse.io/G4b413l/tidy-walrus-92

The color code for the loading spinner: #EF476F

The whole code for the loading spinner:

.three-body { --uib-size: 35px; --uib-speed: 0.8s; --uib-color: #EF476F; position: relative; display: inline-block; height: var(--uib-size); width: var(--uib-size); animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear; }

.three-body__dot { position: absolute; height: 100%; width: 30%; }

.three-body__dot:after { content: ''; position: absolute; height: 0%; width: 100%; padding-bottom: 100%; background-color: var(--uib-color); border-radius: 50%; }

.three-body__dot:nth-child(1) { bottom: 5%; left: 0; transform: rotate(60deg); transform-origin: 50% 85%; }

.three-body__dot:nth-child(1)::after { bottom: 0; left: 0; animation: wobble1 var(--uib-speed) infinite ease-in-out; animation-delay: calc(var(--uib-speed) * -0.3); }

.three-body__dot:nth-child(2) { bottom: 5%; right: 0; transform: rotate(-60deg); transform-origin: 50% 85%; }

.three-body__dot:nth-child(2)::after { bottom: 0; left: 0; animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out; }

.three-body__dot:nth-child(3) { bottom: -5%; left: 0; transform: translateX(116.666%); }

.three-body__dot:nth-child(3)::after { top: 0; left: 0; animation: wobble2 var(--uib-speed) infinite ease-in-out; }

@keyframes spin78236 { 0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); } }

@keyframes wobble1 { 0%, 100% { transform: translateY(0%) scale(1); opacity: 1; }

50% { transform: translateY(-66%) scale(0.65); opacity: 0.8; } }

@keyframes wobble2 { 0%, 100% { transform: translateY(0%) scale(1); opacity: 1; }

50% { transform: translateY(66%) scale(0.65); opacity: 0.8; } }

[senbet22]

Really like the loading indicator and i think it works well with the colors of our page!