Bullet Loader

Developer
Alexandre Masy
Size
3,028 Kb
Views
22,264
  1. Bullet Loader Previews
  2. Bullet Loader HTML Codes
  3. Bullet Loader CSS Codes

How do I make an bullet loader?

Bullet loader based on a Dribbble shot: https://dribbble.com/shots/874268-Loader-GIF. What is a bullet loader? How do you make a bullet loader? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.

Bullet Loader Previews
IQ Test

Bullet Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bullet Loader</title> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="main"> <section class="intro"> <h1>Bullet Loader</h1> <p>CSS Animation</p> </section> <div class="loader"> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> </div>
</main>
</body>
</html>

Bullet Loader - Script Codes CSS Codes

html, body { background: #E06C9F; font-family: 'Slabo 27px', serif; font-size: 16px;
}
h1 { font-size: 3em; padding: 10px 10px 0px 10px; margin: 0px; opacity: .5;
}
p { padding: 0px 10px 10px 10px; margin: 0; font-size: 2em; opacity: .3;
}
.loader { position: absolute; top: 50%; transform: translateY(-50%); width: 100%;
}
.bullet { position: absolute; top: 0; width: 10px; height: 10px; background: white; border-radius: 100%; transform-origin: center;
}
.bullet:first-child { animation: master 4s infinite;
}
.bullet:not(:nth-child(1)) { animation: bullet 4s infinite; animation-timing-function: cubic-bezier(0.97, -0.14, 0.045, 1.185);
}
.bullet:nth-child(1) { animation-delay: 0s;
}
.bullet:nth-child(2) { animation-delay: 0s;
}
.bullet:nth-child(3) { animation-delay: 0.3s;
}
.bullet:nth-child(4) { animation-delay: 0.7s;
}
@keyframes master { 0% { left: 0; } 10% { animation-timing-function: cubic-bezier(0.5, 0.25, 0, 1.56); left: 50%; } 24% { transform: scale(1); } 25% { transform: scale(2); } 34% { transform: scale(2); } 35% { transform: scale(3); } 44% { transform: scale(3); } 45% { transform: scale(4); } 59% { transform: scale(4); } 60% { transform: scale(3); } 66% { transform: scale(3); } 67% { transform: scale(2); } 72% { transform: scale(2); } 73% { transform: scale(1); } 90% { left: 50%; } 100% { left: 100%; }
}
@keyframes bullet { 0% { left: 0; } 36% { left: 50%; } 50% { left: 50%; } 80% { left: 100%; }
}
Bullet Loader - Script Codes
Bullet Loader - Script Codes
Home Page Home
Developer Alexandre Masy
Username alexandremasy
Uploaded October 01, 2022
Rating 3
Size 3,028 Kb
Views 22,264
Do you need developer help for Bullet Loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexandre Masy (alexandremasy) Script Codes
Name
Activate Button
A Pen by Alexandre Masy
Graphic-icon
Yp-loader
Direction-icon
Pair Game
AngularJS - UI Router - Example 1
Ideation-icon
Blink
Alexandremasy-logo
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!