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!

Oh that's awesome! It's so satisfying

Ugh this game taking forever to load 0 stars XD

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

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

Nice

Cool!

I wish my tablet started up like thi--

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

cool

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

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

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?

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

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

.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;
}
)

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

how would you implement this on a site?

Nice!

Why isn't it loading?

Can I use it?

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 :)

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

Me

Explosion go to the scratchaddons discord

Im on scratch too! @scratcherferlife

Awesome!

cool!

This is amazing good job

Thats really nice :) Very statisfying

How can i see the image im new to this

pretty cool!