🎯 Create a Smooth Loading Ball Animation in Python Using Kivy

Are you looking to build a visually appealing loading animation for your Python app? In this tutorial, we'll show you how to create a loading ball animation using Python and Kivy—perfect for splash screens, loading states, or background processes in your app.

📌 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!

LittleOne7

Pages