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

How do you guys like it? Any feedback?

Voters
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
Profile icon
AndrewWingfield
Comments
hotnewtop
Profile icon
ExplosionScratc

Okay guys, everyone I know from scratch is asking so... I'm --Explosion-- on scratch, Explosion-Scratch on GitHub and this is my repl account. Feel free to say hi at any of those places!

Profile icon
[deleted]

Checked your scratch account I also do scratch! xmas_boy is my [email protected]

Profile icon
CoolGuy27

@ExplosionScratc I do scratch as well, account not shared yet but you might find me (@Beyblade345)

Profile icon
CoolGuy27

@ExplosionScratc I love Life and Faded good job!

Profile icon
JonDoeBeep

@CoolGuy27 I used to scratch and did random things. Im not active there anymore tho.

Profile icon
Henslo

Hey explosion I used to be used scratch too I was one of your followers

Profile icon
sideagle

@ExplosionScratc oh cool! I'm @sideagle from scratch

Profile icon
CatR3kd

I used to do scratch... I remember you! @ExplosionScratc

Profile icon
RayhanADev

That’s pretty neat pal. I started on Scratch and then hopped into the big boy editors xD. @ExplosionScratc

Profile icon
[deleted]

@ExplosionScratc OMG BRUH I JUST REALIZED THANKS TO UR GENIUS ENGINE I HAVE A SIGNIFICANT AMOUNT OF FOLLOWERS THAT HAVE OVER 2K AND 3K!!!!

Profile icon
[deleted]

@HyperGamerStuds lol, of course ur follower count engine :)

Profile icon
[deleted]
Profile icon
JackFranzel

I do scratch too, but I'm better here. I'm (@senorbomby) @ExplosionScratc

Profile icon
Whippingdot

@ExplosionScratc Even I use scratch. But I am not good at all. i don't like block coding because of that. I am better at python(intermediate) and c++(beginner) than scratch. i never understand it. Anyway, my account is sanjaay. Literally my name. Ugh! I created this account around 8 years ago. https://scratch.mit.edu/users/sanjaay/

Profile icon
looserty

@ExplosionScratc How many people have Scratch & Repl.it accounts. ('Cause I do)

Profile icon
hihitherethere

@looserty Lol me too! (Though i don't use it anymore)

Profile icon
retronbv

join the bot repl @ExplosionScratc

Profile icon
JonasPetri

@ExplosionScratc Your Scratch projects are as great as your repls (and your repls are really good!). My username on Scratch is @10greg.

Profile icon
DREWNOLT

@ExplosionScratc Hey I do scratch too! My username is DREWNOLT

Profile icon
DynamicSquid

Oh that's awesome! It's so satisfying

Profile icon
ExplosionScratc

@DynamicSquid Thanks! :D

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
Glare

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

Profile icon
RayhanADev

Huh, this is a really nice use of animation in CSS. Congrats mate!

Profile icon
supergavreel

Nice

Profile icon
[deleted]
Profile icon
elizurfk

Cool!

Profile icon
ExplosionScratc

@elizurfk Thanks! :)

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
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
AgastyaSandhuja

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

Profile icon
DabDatBass

Ah, nice to see some people from Scratch here. :) Edit: also, cool that you used the 'animation' thing lol. I can't really figure it out though, maybe give some tips?

Profile icon
Leroy01010

I LOVE theinternetiscool @DabDatBass

Profile icon
ExplosionScratc

@DabDatBass Oh hai lel

Profile icon
RolandJLevy

Hey @ExplosionScratc, this is excellent! Great to see someone creating something this good purely with CSS. You've done a great job! :)

Profile icon
ExplosionScratc

@rjlevy Thank you!

Profile icon
Buhron

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

Loading animation 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
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
SeamusDonahue

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

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
aiden765

pretty cool!