Ball bouncing loading animation

Developer
Adam
Size
3,144 Kb
Views
18,216
  1. Ball bouncing loading animation Previews
  2. Ball bouncing loading animation HTML Codes
  3. Ball bouncing loading animation CSS Codes

How do I make an ball bouncing loading animation?

What is a ball bouncing loading animation? How do you make a ball bouncing loading animation? This script and codes were developed by Adam on 15 September 2022, Thursday.

Ball bouncing loading animation Previews
IQ Test

Ball bouncing loading animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ball bouncing loading animation</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Indie+Flower);
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { background-color: #656D78;
}
.line { width: 200px; height: 1px; margin: 0 0 0 -100px; background-color: #fff; position: absolute; top: 200px; left: 50%;
}
.line:after { content: 'Fancy Loading'; width: 100%; color: #fff; font-family: 'Indie Flower', cursive; font-size: 32px; text-align: center; position: absolute; top: 3px; left: 0;
}
.ball { width: 50px; height: 50px; margin: 0 0 0 -25px; background-color: #EC87C0; border-radius: 100%; position: absolute; top: 10px; left: 50%; animation: ball 1s infinite;
}
@keyframes ball { 0% { top: 6px; } 5% { top: 8px; } 10% { top: 12px; } 15% { top: 20px; } 20% { top: 38px; } 25% { top: 72px; } 30% { top: 100px; } 35% { top: 152px; } 40% { top: 154px; height: 46px; width: 54px; margin-left: -27px; } 50% { top: 176px; height: 24px; width: 72px; margin-left: -36px; } 55% { top: 162px; height: 38px; width: 58px; margin-left: -29px; } 60% { top: 138px; height: 48px; width: 52px; margin-left: -26px; } 65% { top: 110px; height: 50px; width: 50px; } 70% { top: 72px; } 75% { top: 38px; } 80% { top: 20px; } 85% { top: 12px; } 90% { top: 8px; } 95% { top: 5px; } 100% { top: 5px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="ball"></div>
<div class="line"></div>
</body>
</html>

Ball bouncing loading animation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { background-color: #656D78;
}
.line { width: 200px; height: 1px; margin: 0 0 0 -100px; background-color: #fff; position: absolute; top: 200px; left: 50%;
}
.line:after { content: 'Fancy Loading'; width: 100%; color: #fff; font-family: 'Indie Flower', cursive; font-size: 32px; text-align: center; position: absolute; top: 3px; left: 0;
}
.ball { width: 50px; height: 50px; margin: 0 0 0 -25px; background-color: #EC87C0; border-radius: 100%; position: absolute; top: 10px; left: 50%; animation: ball 1s infinite;
}
@keyframes ball { 0% { top: 6px; } 5% { top: 8px; } 10% { top: 12px; } 15% { top: 20px; } 20% { top: 38px; } 25% { top: 72px; } 30% { top: 100px; } 35% { top: 152px; } 40% { top: 154px; height: 46px; width: 54px; margin-left: -27px; } 50% { top: 176px; height: 24px; width: 72px; margin-left: -36px; } 55% { top: 162px; height: 38px; width: 58px; margin-left: -29px; } 60% { top: 138px; height: 48px; width: 52px; margin-left: -26px; } 65% { top: 110px; height: 50px; width: 50px; } 70% { top: 72px; } 75% { top: 38px; } 80% { top: 20px; } 85% { top: 12px; } 90% { top: 8px; } 95% { top: 5px; } 100% { top: 5px; }
}
Ball bouncing loading animation - Script Codes
Ball bouncing loading animation - Script Codes
Home Page Home
Developer Adam
Username adam2326
Uploaded September 15, 2022
Rating 3
Size 3,144 Kb
Views 18,216
Do you need developer help for Ball bouncing loading animation?

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!

Adam (adam2326) Script Codes
Name
Count up in seconds
Swipe mobile layout
Fancy Side Menu
Material Radio Buttons
Floating Button
Swipe to open menu
Fancy Forms
CSS 3D Kitchen
A Pen by Adam
Button hover animation
Create amazing Facebook ads 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!