This question was asked in Microsoft’s frontend interview. Enroll into alpha.learnersbucket.com to practice frontend interview question asked in product-based companies.
A spinner or a loader is used to represent the loading state on the UI.
As this is small animation, we can create it using CSS to avoid adding loading images or any external assets.
Spinner are of different variations, here we will be creating a simple circular spinner with a highlighter to show the loading state.
To create this, we will create a square box and then change the border color of one of its side to design the spinner.
Then add make the spinner circular by setting the border-radius to the 50%. Then add the animation to rotate it infinitely.
<div class="spinner"></div>
<style>
.spinner{
width: 50px;
height: 50px;
border: 16px solid #f3f3f3;
border-top-color: blue;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
If you want, you can change the border color on multiple border side.