Loading animations enhance the user experience by keeping users engaged while content is loading. A capsule loader is a modern, simple loading animation often used in web design. This guide will help you create a capsule loader using just HTML and CSS.
A capsule loader is a capsule-shaped animation that usually bounces, rotates, or pulses, creating a smooth and visually pleasing effect. It’s commonly used on websites to indicate that a process is happening, such as data fetching or page loading. Capsule loaders are popular because they are both simple to design and effective in keeping users engaged.
Step 01: Setting up the HTML structure
The HTML for a capsule loader is minimal and requires just a few elements. Here’s the basic structure:
✲ index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Capsule Loader | Coding Zemigle</title> </head> <body> <div class="capsule-container"> <div class="capsule-wrapper"> <div class="capsule"> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> </div> <div class="side"></div> <div class="side"></div> </div> </div> </body> </html>
We create a div container with the class loader and an inner div with the class capsule. The loader class will center the animation, while the capsule class will represent the capsule shape that we animate.
Step 02: Style with the CSS
Now, we’ll add some styling and animations to bring our capsule loader to life. Save the following CSS in a file named style.css:
✲ style.css
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 100%, #262b2f, #000);
}
.capsule-container {
width: 50vmin;
height: 50vmin;
background: #fff0;
display: flex;
align-items: center;
justify-content: center;
}
.capsule-wrapper {
background: #fff0;
width: 15vmin;
height: 40vmin;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transform: rotate(180deg);
animation: spin 4s linear 0s infinite;
}
@keyframes spin {
100% { transform: rotate(-540deg);}
}
.capsule-wrapper .side {
background: #f7c340;
position: relative;
overflow: hidden;
width: 11vmin;
height: 15vmin;
border-radius: 6vmin 6vmin 0 0;
}
.capsule-wrapper .side + .side {
background: #d9680c;
border-radius: 0 0 6vmin 6vmin;
border-top: 1vmin solid #621e1a;
animation: open 2s ease-in-out 0s infinite;
}
@keyframes open {
0%, 20%, 80%, 100% { margin-top: 0; }
30%, 70% { margin-top: 10vmin; }
}
.capsule-wrapper .side:before {
content: "";
position: absolute;
width: 2vmin;
height: 10vmin;
bottom: 0;
right: 1.5vmin;
background: #fff2;
border-radius: 1vmin 1vmin 0 0;
animation: shine 1s ease-out -1s infinite alternate-reverse;
}
.capsule-wrapper .side + .side:before {
bottom: inherit;
top: 0;
border-radius: 0 0 1vmin 1vmin;
}
.capsule-wrapper .side:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
border-radius: 6vmin 6vmin 0 0;
border: 1.75vmin solid #00000022;
border-bottom-color: #fff0;
border-bottom-width: 0vmin;
border-top-width: 1vmin;
animation: shadow 1s ease -1s infinite alternate-reverse;
}
.capsule-wrapper .side + .side:after {
bottom: inherit;
top: 0;
border-radius: 0 0 6vmin 6vmin;
border-top-color: #fff0;
border-top-width: 0vmin;
border-bottom-width: 1vmin;
}
@keyframes shine {
0%, 46% { right: 1.5vmin; }
54%, 100% { right: 7.5vmin; }
}
@keyframes shadow {
0%, 49.999% { transform: rotateY(0deg); left: 0; }
50%, 100% { transform: rotateY(180deg); left: -3vmin; }
}
.capsule {
position: absolute;
width: calc(100% - 6vmin);
height: calc(100% - 12vmin);
background: #fff0;
border-radius: 5vmin;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.capsule i {
width: 1vmin;
height: 1vmin;
background: #47c;
border-radius: 100%;
position: absolute;
animation: medicine-dust 1.75s ease 0s infinite alternate;
}
.capsule i:nth-child(2n+2) {
width: 1.5vmin;
height: 1.5vmin;
margin-top: -5vmin;
margin-right: -5vmin;
animation-delay: -0.2s;
}
.capsule i:nth-child(3n+3) {
width: 2vmin;
height: 2vmin;
margin-top: 4vmin;
margin-right: 3vmin;
animation-delay: -0.33s;
}
.capsule i:nth-child(4) {
margin-top: -5vmin;
margin-right: 4vmin;
animation-delay: -0.4s;
}
.capsule i:nth-child(5) {
margin-top: 5vmin;
margin-right: -4vmin;
animation-delay: -0.5s;
}
.capsule i:nth-child(6) {
margin-top: 0vmin;
margin-right: -3.5vmin;
animation-delay: -0.66s;
}
.capsule i:nth-child(7) {
margin-top: -1vmin;
margin-right: 7vmin;
animation-delay: -0.7s;
}
.capsule i:nth-child(8) {
margin-top: 6vmin;
margin-right: -1vmin;
animation-delay: -0.8s;
}
.capsule i:nth-child(9) {
margin-top: 4vmin;
margin-right: -7vmin;
animation-delay: -0.99s;
}
.capsule i:nth-child(10) {
margin-top: -6vmin;
margin-right: 0vmin;
animation-delay: -1.11s;
}
.capsule i:nth-child(1n+10) {
width: 0.6vmin;
height: 0.6vmin;
}
.capsule i:nth-child(11) {
margin-top: 6vmin;
margin-right: 6vmin;
animation-delay: -1.125s;
}
.capsule i:nth-child(12) {
margin-top: -7vmin;
margin-right: -7vmin;
animation-delay: -1.275s;
}
.capsule i:nth-child(13) {
margin-top: -1vmin;
margin-right: 3vmin;
animation-delay: -1.33s;
}
.capsule i:nth-child(14) {
margin-top: -3vmin;
margin-right: -1vmin;
animation-delay: -1.4s;
}
.capsule i:nth-child(15) {
margin-top: -1vmin;
margin-right: -7vmin;
animation-delay: -1.55s;
}
@keyframes medicine-dust {
0%, 100% { transform: translate3d(0vmin, 0vmin, -0.1vmin); }
25% { transform: translate3d(0.25vmin, 5vmin, 0vmin); }
75% { transform: translate3d(-0.1vmin, -4vmin, 0.25vmin); }
}Now, load your HTML file in a browser to see the animated capsule loader. The capsule should bounce up and down, giving the loader an appealing, smooth effect. This loader can be customized and scaled as needed for various projects.
Creating a capsule loader using HTML and CSS is a straightforward way to add an engaging touch to your website. With a bit of CSS animation, you can create visually appealing loaders that improve the user experience. Experiment with the colors, animation duration, and effects to suit your design style. Capsule loaders, although simple, are a great asset to any web application, offering user feedback in a stylish and functional way.