CSS Spinner Lesson - 43

A CSS spinner is a type of loading animation that can be created using only HTML and CSS, without the need for JavaScript or images. It's often used to indicate that content is being loaded or processed in the background. Here's an example of a simple CSS spinner: CSS: .spinner { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 5px solid #ffffff; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } In this example, the .spinner class defines the appearance of the spinner. It is a circle created using the border property. The @keyframes rule defines an animation called spin that rotates the circle 360 degrees over 2 seconds infinitely. You can customize the size, colors, and animation duration by adjusting the values in the CSS code. You can also apply this class to any element on your webpage to display the spinner. Here's how it works: The border property is used to create a circle with a transparent center. The width and color of the border determine the thickness and color of the spinner. The border-radius property is set to 50% to make the border a perfect circle. The @keyframes rule specifies the spin animation. It rotates the circle from 0 degrees to 360 degrees over the course of 2 seconds (as defined by the 2s value). The linear value specifies that the rotation should occur at a constant speed. The infinite value means the animation will repeat infinitely. Feel free to modify the CSS properties to fit your design requirements.