Animate a loader
Create an animated loader in Scratch by designing sprites and using loops, motion, and timing blocks to make a spinning or pulsing icon.
Step-by-step guide to animate a loader
Create a Simple Loader Using HTML & CSS | Easy CSS Animation Tutorial🚀
Step 1
Open Scratch and click "Create" to start a brand-new project.
Step 2
Delete the cat sprite by right-clicking it and choosing "delete" so you have a clean stage.
Step 3
Click "Choose a Sprite" then pick "Paint" to make a new sprite for your loader.
Step 4
In the costume editor draw a ring of small filled circles (dots) arranged around the center cross so they look like a wheel.
Step 5
Move your dots so the costume's center cross is exactly in the empty center of the ring.
Step 6
Set the sprite size in the sprite panel so the loader fits nicely on the stage.
Step 7
In the Code area drag in a "when green flag clicked" block.
Step 8
Attach a "forever" block under the hat block.
Step 9
Inside the forever add a "turn clockwise 15 degrees" block to make the ring spin.
Step 10
Inside the forever add a "wait 0.05 seconds" block right after the turn to control the speed.
Step 11
Inside the forever add a "repeat 6" block that contains "change size by 4" and "wait 0.03 seconds" to make the loader grow slightly.
Step 12
Inside the forever add another "repeat 6" block that contains "change size by -4" and "wait 0.03 seconds" to make the loader shrink back.
Step 13
Click the green flag to test your spinning pulsing loader and then share your finished creation on DIY.org
Final steps
You're almost there! Complete all the steps, bring your creation to life, post it, and conquer the challenge!
Help!?
What can I use instead of the 'Paint' sprite or if I can't access Scratch online?
If you can't access Scratch or the 'Paint' option, use Scratch Desktop or upload a prepared image of a dotted ring and then open the costume editor to position the center cross as described in step 5.
The ring isn't spinning smoothly or looks off-center—how do I fix it?
Make sure you moved the dots so the costume's center cross is exactly in the empty center of the ring (step 5) because the 'turn clockwise 15 degrees' block rotates around that cross, and if motion is jerky reduce the sprite size in the sprite panel (step 6) or increase the 'wait 0.05 seconds' value.
How can I adapt this activity for younger children or older kids?
For younger kids, simplify by choosing a ready-made circle sprite instead of 'Choose a Sprite -> Paint' and use longer waits (for example 0.1 seconds) and smaller repeat counts, while older kids can add clones, variables, or extra effects to the 'repeat 6' size-change blocks to make the pulsing more advanced.
How can we enhance or personalize the pulsing spinning loader?
Enhance it by adding a 'change color effect' block after the 'turn clockwise 15 degrees' and creating extra costumes to switch between or adding a slider variable to control the 'wait 0.05 seconds' speed before sharing on DIY.org.
Watch videos on how to animate a loader
How to Create a Spinning Loading Animation using HTML & CSS | Simple CSS Loader Tutorial
4 Videos
How to Create a Spinning Loading Animation using HTML & CSS | Simple CSS Loader Tutorial
CSS Circular Spinner Loader | Loading Animation Tutorial for Beginners
Create a Stunning Loading Animation with Pure HTML CSS No JavaScript! #HTML #cssanimation #css
Rotating Squares Loader Animation Using HTML & CSS | Coding Cloud
Facts about Scratch and block-based coding
⏳ Progress indicators (loaders) have been used since early graphical user interfaces to show that the computer is working.
🖼️ A sprite is a movable image in games and animations — in Scratch each sprite can have multiple 'costumes' to animate.
🔁 Loops like 'repeat' and 'forever' in Scratch let you make long, repeating animations with just a few blocks.
🐱 Scratch was created at the MIT Media Lab and uses a friendly cat mascot to help kids learn coding.
🎞️ Traditional animation often uses about 12–24 frames per second — tiny changes between frames make motion look smooth.
How do I create an animated loader in Scratch?
What materials do I need to make a loader animation in Scratch?
What ages is this loader animation activity suitable for?
What are the benefits and fun variations of making a loader in Scratch?
One subscription, many ways to play and learn.
Only $6.99 after trial. No credit card required