Skip to content
Sign upLog in
← Back to Community
A cool loading animation
Profile icon
ExplosionScratc

How do you guys like it? Any feedback?

Voters
Profile icon
DGandhi
Profile icon
Volodya-Bot-developer
Profile icon
pugpotatohybrid
Profile icon
OldWizard209
Profile icon
JWZ6
Profile icon
FrancisPan
Profile icon
G0RG3
Profile icon
programmeruser
Profile icon
maxina
Profile icon
fjordfrost
Comments
hotnewtop
Profile icon
Buhron

squeeze the balls or should you
[lol](data:text/html;

Loading animation
Loading...
body { padding: 0; margin: 0; width: 100%; height: 100vh; background: radial-gradient(#5967b6, #44ad96); } .wrapper { width: 200px; height: 60px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.circle {
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
background-color: #fff;
left: 15%;
transform-origin: 50%;
animation: circle .5s alternate infinite ease;
}

@keyframes
circle {
0% {
top: 60px;
height: 5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}

40% { height: 20px; border-radius: 50%; transform: scaleX(1); } 100% { top: 0%; }

}

.circle:nth-child(2) {
left: 45%;
animation-delay: .2s;
}

.circle:nth-child(3) {
left: auto;
right: 15%;
animation-delay: .3s;
}

.shadow {
width: 20px;
height: 4px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 62px;
transform-origin: 50%;
z-index: -1;
left: 15%;
animation: shadow .5s alternate infinite ease;
}

@keyframes
shadow {
0% {
transform: scaleX(1.5);
}

40% { transform: scaleX(1); opacity: .7; } 100% { transform: scaleX(.2); opacity: .4; }

}

.shadow:nth-child(4) {
left: 45%;
animation-delay: .2s
}

.shadow:nth-child(5) {
left: auto;
right: 15%;
animation-delay: .3s;
}

.wrapper span {
text-align: center;
position: absolute;
top: 75px;
font-family: 'Montserrat';
font-weight: 900;
font-size: 40px;
letter-spacing: 1px;
color: #fff;
left: 15%;
}
/* Don't pay attention to stuff after this, this is just so that the font loads faster. /
/
cyrillic-ext /


@font-face
{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/
cyrillic /

@font-face
{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/
vietnamese /

@font-face
{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/
latin-ext /

@font-face
{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/
latin */

@font-face
{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
)

Profile icon
imanewbiedev

where is the timeout for the loading i want to use this in my website

Profile icon
Marc-020513

how would you implement this on a site?

Profile icon
G0RG3

Nice!

Profile icon
maxina

Why isn't it loading?

Profile icon
LJMarine

Can I use it?

Profile icon
elburg

I wish my tablet started up like thi--

OH WAIT! IT RUNS FIRE OS! I CAN HACK IT!

Profile icon
MartiaForoud

cool

Profile icon
drunkenkismet

I dig. Great use of CSS, and it shows devs we don't always need to jump to JS to achieve nifty animations.

I almost prefer it without the off-centered Loading... text -- the bouncing, infinitum dots kind of give away the game :)

Profile icon
arjgupta

I like the animation. For a second, I forgot that it was a animation and was waiting for it to finish loading...Still waiting! XD

Profile icon
SeamusDonahue

pretty awesome, takes too long to load (that was a joke XD)

Profile icon
AgastyaSandhuja

awesome! would you mind making another site showing how this can be implemented?

Profile icon
ChezTacoz

Ugh this game taking forever to load 0 stars XD

Profile icon
elburg

@ChezTacoz
I have been waiting for six trillion years and a night and yet it still hasn't loaded!

Profile icon
ChezTacoz

@elburg
im rating this 0 stars smh

Profile icon
elburg

@ChezTacoz
im rating it...

-1 star

Profile icon
brooc210
Profile icon
retronbv

Explosion go to the scratchaddons discord

Profile icon
ExplosionScratc

@retronbv
Okay!

Profile icon
retronbv

@ExplosionScratc
goto testing discord and my bot repl

Profile icon
ShivankChhaya

Im on scratch too!

@scratcherferlife

Profile icon
DanteAlaimo

Awesome!

Profile icon
28sh

cool!

Profile icon
CaidynDibean

This is amazing good job

Profile icon
Lambutty

Thats really nice :) Very statisfying

Profile icon
agatonjailine

How can i see the image im new to this

Profile icon
Glare

I like how you included shadows. This is very good!

Profile icon
aiden765

pretty cool!

Profile icon
Pizzaz4me

This is a really nice loading animation. Search engines and websites should use this instead of their boring loading screen.

Profile icon
elipie

@ExplosionScratc
suggestion: make the three .'s do a ... thing, cause it looks kinda weird with the dots moving and the bigger dots not, just a suggestion dont have to add it

Profile icon
juul02

It's a really beautiful loading animation!

Profile icon
RohilPatel

the page doesnt load

Profile icon
glitchish

i also do scratch: scratch page


@ExplosionScratc
whats you scratch page?
(ill follow u)

Profile icon
glitchish

im also on github: github.com/edit3 i think

Profile icon
AmazingMech2418

Nice! And with no JavaScript too! Though, why is all of your code after the closing HTML tag?

Profile icon
shivamnarkar47

Good animation skills