CSS Loading Spinner Example

This CSS Loading Spinner Example showcases a simple, eye-catching spinner animation for your web page. It uses CSS to create a spinning circle that can be used as a loading indicator. This code defines the spinner’s appearance and animation, making it helpful for enhancing user experience during page loading.

You can use this CSS Loading Spinner code in your web projects, such as websites or web applications. It adds a visually appealing loading animation, improving user experience by providing feedback during page loading.

How to Create CSS Loading Spinner Example

1. Begin by adding the necessary HTML structure to your web page. In the example code, we have a simple heading and a <div> element with the ID “loading,” which will house our spinner.

<h1>Super simple CSS spinner</h1>
<div id="loading"></div>

2. Next, add the following CSS styles to your project. You can do this by linking to an external CSS file or embedding it directly in your HTML file. Here’s a snippet of the CSS code you’ll need:

@import url(https://fonts.googleapis.com/css?family=Roboto:100);

body { margin-top: 100px; background-color: #137b85; color: #fff; text-align:center; }

h1 {
  font: 2em 'Roboto', sans-serif;
  margin-bottom: 40px;
}

#loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}

Feel free to customize the spinner’s appearance by modifying the CSS properties. You can change its size, colors, or animation duration to match your website’s design.

That’s all! hopefully, you have successfully created Css Loading Spinner Example. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.