Css Loader

What is Loader in CSS?

Loaders (also named as spinners and loading symbols) are generally used by mean of which content is being loaded or processed is being expressed.

They are usually lively and there are a variety of forms from which you have to choose.

Simple CSS Loader:

This example creates a simple circular spinner using CSS animations. Adjust the colors, size, and animation duration as needed.

                          
                            .loader {
                                border: 8px solid #f3f3f3; /* Light gray border for the spinner */
                                border-top: 8px solid #3498db; /* Blue border for the top part of the spinner */
                                border-radius: 50%; /* Create a circular shape */
                                width: 50px; /* Set the width of the spinner */
                                height: 50px; /* Set the height of the spinner */
                                animation: spin 1s linear infinite; /* Apply the spin animation */
                            }
                            
                            @keyframes spin {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            }

Ring Loader:

This example creates a ring loader with a rotating animation. Adjust the colors, size, and animation duration as needed.

                          
                            .ring-loader {
                                display: inline-block;
                                width: 64px;
                                height: 64px;
                            }
                            
                            .ring-loader:after {
                                content: " ";
                                display: block;
                                width: 46px;
                                height: 46px;
                                margin: 1px;
                                border-radius: 50%;
                                border: 5px solid #3498db; /* Blue border for the ring */
                                border-color: #3498db transparent #3498db transparent;
                                animation: ring-spin 1.2s linear infinite; /* Apply the ring-spin animation */
                            }
                            
                            @keyframes ring-spin {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            }

Bouncing Ball Loader:

This example creates a loader with a bouncing ball animation. Adjust the colors, size, and animation duration as needed.

                          
                            .bouncing-ball-loader {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 100px;
                            }
                            
                            .ball {
                                width: 20px;
                                height: 20px;
                                background-color: #3498db; /* Blue color for the bouncing ball */
                                border-radius: 50%;
                                animation: bounce 1s infinite alternate; /* Apply the bounce animation */
                            }
                            
                            @keyframes bounce {
                                0% { transform: translateY(0); }
                                100% { transform: translateY(40px); }
                            }

Pulse Loader:

In such situation the animation takes the form of an insistent circle spin. Change colors, size, and the speed of movement as required.

                          
                            .pulse-loader {
                                display: inline-block;
                            }
                            
                            .pulse {
                                width: 20px;
                                height: 20px;
                                background-color: #3498db; /* Blue color for the pulsating circle */
                                border-radius: 50%;
                                animation: pulse 1s infinite; /* Apply the pulse animation */
                            }
                            
                            @keyframes pulse {
                                0% { transform: scale(0.8); }
                                50% { transform: scale(1); }
                                100% { transform: scale(0.8); }
                            }