How to make a pokeball loader

In this tutorial we are going to make a pokeball loader. First we need to set up our mini-project by creating a file index.html and copy the following code into the file.

HTMLindex.html
<!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" />
    <title>Pokeball loader</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="pokeball-wrapper">
        <div class="pokeball"></div>
      </div>
    </div>
  </body>
</html>

Now we need to create a file style.css with the following code.

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

body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 100%;
}

.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d3d3d3;
}

Basically we are just wrapping our pokeball inside a centered container. Now let's define our pokeball and its wrapper.

CSSstyle.css
.pokeball-wrapper {
  width: 150px;
  height: 150px;
  position: relative;
  z-index: 1;
}

.pokeball {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    red 0%,
    red 47.5%,
    rgba(0, 0, 0, 0.7) 47.5%,
    rgba(0, 0, 0, 0.7) 52.5%,
    white 52.5%,
    white 100%
  );
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.7);
  position: relative;
  transform-origin: bottom center;
  overflow: hidden;
}

Our pokeball will now look like this

First version of our pokeball
First version of our pokeball

It kinda looks a little bit boring because it lacks details. Let's add a button and shadow to it

CSSstyle.css
.pokeball::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 2px 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 5px rgb(255, 255, 255),
    0 0 0 10px rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.pokeball-wrapper::after {
  content: "";
  width: 90px;
  height: 10px;
  position: absolute;
  left: 30px;
  bottom: -5px;
  background-color: rgb(50, 10, 10);
  border-radius: 50%;
  z-index: -1;
}
Pokeball with details
Pokeball with details

Now it looks better! Let's add some animations as well.

CSSstyle.css
.pokeball-wrapper::after {
  ...
  animation: movingShadow 2s ease-in-out infinite;
} 

.pokeball {
  ...
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  10% {
    transform: translateY(-35px);
  }
  15% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-15px);
  }
  30% {
    transform: translateY(0px);
  }
  50% {
    transform: rotateZ(10deg);
  }
  60% {
    transform: rotateZ(-10deg);
  }
  70% {
    transform: rotateZ(10deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

@keyframes movingShadow {
  10% {
    transform: scaleX(0.6);
  }
  15% {
    transform: scaleX(1);
  }
  25% {
    transform: scaleX(0.8);
  }
  30% {
    transform: scaleX(1);
  }
  50% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-6px);
  }
  70% {
    transform: translateX(6px);
  }
  100% {
    transform: translateX(-6x);
  }
}

Hmm, our pokeball looks good but it is missing something. It is missing some shining effects on the pokeball. So let's add that.

CSSstyle.css
.pokeball::after {
  content: "";
  width: 150px;
  height: 150px;
  position: absolute;
  top: -45px;
  left: -35px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 50%
  );
  transform: skew(-10deg, -10deg);
}

Final version

Tadaa 🎉! That's it! Our pokeball loader is now finished. Thanks for following this tutorial. Any feedback are welcome and appreciated!

Back to blog
Discuss on Twitter ‱ Tweet about this post
  • Email
  • GitHub
  • Twitter
  • Codepen
  • LinkedIn
  • GitLab