CSS Loading Spinner Example

CSS Loading Spinner Example
Code Snippet:Super Simple CSS Spinner
Author: Thomas Mandelid
Published: January 21, 2024
Last Updated: January 22, 2024
Downloads: 854
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X