How to Create Atom in Motion Preloader HTML CSS

Written by January 1, 2025 3 min read 0 Comments

Here’s a creative “Atom in Motion Preloader” where the electrons revolve around a nucleus to create a dynamic and engaging animation.

Create index.html file and copy code and paste code our layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Atom in Motion Preloader / Mycodingtutorial</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="preloader">
    <div class="atom">
      <div class="nucleus"></div>
      <div class="orbit orbit1">
        <div class="electron"></div>
      </div>
      <div class="orbit orbit2">
        <div class="electron"></div>
      </div>
      <div class="orbit orbit3">
        <div class="electron"></div>
      </div>
    </div>
    <p class="loading-text">Loading...</p>
  </div>
</body>
</html>

Create style.css file and copy code and paste code our layout.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #c4364e;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.preloader {
  text-align: center;
  color: #ffffff;
}

.loading-text {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

.atom {
  position: relative;
  width: 100px;
  height: 100px;
  animation: rotate 4s linear infinite;
}

.nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #ff5722;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit1 .electron {
  animation: spin 1.5s linear infinite;
}

.orbit2 {
  width: 70px;
  height: 70px;
}

.orbit2 .electron {
  animation: spin 2s linear infinite;
}

.orbit3 {
  width: 50px;
  height: 50px;
}

.orbit3 .electron {
  animation: spin 2.5s linear infinite;
}

.electron {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #4db2ec;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% {
    transform: rotate(0deg) translateX(50px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(50px) rotate(-360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

How It Works:

Nucleus: A central orange circle (div.nucleus).
Orbits: Three circular paths (div.orbit) around the nucleus.
Electrons: Small blue circles (div.electron) move along the orbits using the spin animation.
Rotation: The entire atom rotates using the rotate animation for a dynamic effect.

Steps to Use:

Copy the HTML and CSS into index.html and styles.css files, respectively.
Open index.html in your browser.
Enjoy the animated atom preloader with spinning electrons! ⚛️

Feel free to adjust the colors, sizes, or animation speeds to match your design style.

Tags:

Post Rating

6.4 / 10

User rating: 6.4 / 10

Rate this post

Click a number to rate this article.

About the Author

How It Works:

Steps to Use:

Related Posts