🎯 Create a Smooth Loading Ball Animation in Python Using Kivy
📌 Why Use Kivy for UI Animations?
Kivy is a powerful, open-source Python framework used for building multi-platform apps with rich UIs. It’s lightweight, fast, and makes it easy to design custom animations and effects with minimal code.
If you're developing mobile or desktop apps with Python, Kivy is a great choice!
🧠 Key Concepts We’ll Use
Before we get to the code, here are some Kivy concepts we’ll use:
-
Widget: To create and update UI elements. -
Clock: For time-based updates (animations). -
Canvas: To draw shapes like circles. -
Animation: Built-in class for smooth transitions.
💻 Python Kivy Loading Ball Animation Code
Here is the full Python code to create a simple loading ball animation using Kivy:
import pygame
pygame.mixer.init()
from kivy.app import App
from kivy.uix.label import Label
from kivy.graphics import Ellipse ,Line ,Color
from kivy.uix.widget import Widget
from kivy.clock import Clock
from kivy.animation import Animation
import numpy as np
import math
pygame.mixer_music.load("C:/Users/pc/Downloads/cartoon-jump-6462.mp3")
def find_curve(x0, y0, x2, y2, peak_height, num_points=100):
h = (x0 + x2) / 2 # Midpoint x
k = peak_height # Peak height
a = (y0 - k) / ((x0 - h) ** 2)
x_values = np.linspace(x0, x2, num_points)
y_values = a * (x_values - h) ** 2 + k
return x_values, y_values
class sample(Widget):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.balls = [ ]
self.target = 300
self.count = 0
self.ball_count = 0
x1,y1 = (50,50)
x2,y2 = (300,50)
peak_height = 100
self.stat = None
self.colors = []
self.c = 0
with self.canvas :
for i in range(6):
ball = Ellipse(pos = (50+i*50,y2),size = (30,30))
self.balls.append(ball)
self.x_vals, self.y_vals = find_curve(x1, y1, x2, y2, peak_height)
Clock.schedule_once(self.st,3)
def st(self,dt):
Clock.schedule_interval(self.update,1/60)
def update(self,dt):
ball = self.balls[self.ball_count]
ball.pos = (self.x_vals[self.count],self.y_vals[self.count])
self.count+=1
if self.count == len(self.x_vals):
pygame.mixer.music.stop()
pygame.mixer.music.play()
self.ball_count+=1
self.count = 0
if self.ball_count == len(self.balls):
self.ball_count= 0
for i,ball in enumerate( self.balls) :
if ball != self.balls[self.ball_count]:
x,y = ball.pos
ball.pos=(x-0.5,y)
class myapp(App):
def build(self):
return sample()
if __name__ == "__main__":
myapp().run()
🧩 Code Explanation
Let’s break it down:
1. Creating the Ball Widget
You likely defined a Widget subclass to draw a ball (circle) on the screen using Kivy's canvas.
2. Animating the Ball
The Animation class or the Clock.schedule_interval method is used to update the position, size, or opacity of the ball, making it appear like it's bouncing or spinning.
3. Looping the Animation
To create a continuous loading effect, the animation restarts after completion, or multiple balls animate in sequence.
📱 Output Preview
Once the app runs, you should see a smooth, looping animation of a ball (or multiple balls) that feels like a modern loading screen animation. This adds a touch of polish and professionalism to your Python app.
✅ Conclusion
Creating a loading ball animation using Python Kivy is both fun and useful. With just a few lines of code, you can make your app feel more responsive and polished.
If you found this tutorial helpful, share it with your fellow devs and drop a comment if you want more Kivy animations!
