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.
<!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.
* {
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.
.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
It kinda looks a little bit boring because it lacks details. Let's add a button and shadow to it
.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;
}
Now it looks better! Let's add some animations as well.
.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.
.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);
}
Tadaa đ! That's it! Our pokeball loader is now finished. Thanks for following this tutorial. Any feedback are welcome and appreciated!