3D Spinner in CSS
3D Spinner in CSS

Today we will create a 3D spinner in CSS. You can use it as a loading animation on your website or make it a decorative element.

Also Read- Beautiful Mouse Art in CSS.

Table of Contents

Step 1:

First, we will create our HTML file and write the below code to it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>3D Spinner in CSS</title>
  </head>
  <body>
    <div class="loader-3d"></div>
  </body>
</html>

Step 2:

Now, we will create a styole.css file write the below code

* {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
}
.loader-3d {
  top: calc(50% - 12.5px);
  left: calc(50% - 100px);
  position: absolute !important;
}
/* Demo specific styles end */

.loader-3d,
.loader-3d:before,
.loader-3d:after {
  width: 200px;
  height: 40px;
  background: no-repeat;
  background-image: radial-gradient(closest-side, #111 100%, transparent),
    radial-gradient(closest-side, #111 100%, transparent);
  background-size: 20px 20px, 20px 20px;
  background-position: 0% center, 100% center;
  position: absolute;
  transform: translateZ(0);
  animation: slide 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite,
    zoom ease-out 0.75s infinite alternate;
  content: "";
}
.loader-3d {
  animation-delay: 0.5s;
}
.loader-3d:after {
  animation-delay: 1s;
}

@keyframes slide {
  to {
    background-position: 100%, 0;
  }
}

@keyframes zoom {
  to {
    background-size: 40px 40px, 10px 10px;
  }
}

And you have it.

The source code is available at Github. Click here for the source code.

If you find this post helpful then please share and comment.

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply