A cool loading animation
How do you guys like it? Any feedback?
Oh that's awesome! It's so satisfying
@DynamicSquid Thanks! :D
Ugh this game taking forever to load 0 stars XD
@ChezTacoz I have been waiting for six trillion years and a night and yet it still hasn't loaded!
@ChezTacoz im rating it...
-1 star
I like how you included shadows. This is very good!
Huh, this is a really nice use of animation in CSS. Congrats mate!
Nice
Noice @supergavreel
Cool!
@elizurfk Thanks! :)
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?
I LOVE theinternetiscool @DabDatBass
@DabDatBass Oh hai lel
Hey @ExplosionScratc, this is excellent! Great to see someone creating something this good purely with CSS. You've done a great job! :)
@rjlevy Thank you!
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)
Explosion go to the scratchaddons discord
@retronbv Okay!
@ExplosionScratc goto testing discord and my bot repl
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!
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!
Checked your scratch account I also do scratch! xmas_boy is my [email protected]
@ExplosionScratc I do scratch as well, account not shared yet but you might find me (@Beyblade345)
@ExplosionScratc I love Life and Faded good job!
@CoolGuy27 I used to scratch and did random things. Im not active there anymore tho.
Hey explosion I used to be used scratch too I was one of your followers
@ExplosionScratc oh cool! I'm @sideagle from scratch
I used to do scratch... I remember you! @ExplosionScratc
That’s pretty neat pal. I started on Scratch and then hopped into the big boy editors xD. @ExplosionScratc
@ExplosionScratc OMG BRUH I JUST REALIZED THANKS TO UR GENIUS ENGINE I HAVE A SIGNIFICANT AMOUNT OF FOLLOWERS THAT HAVE OVER 2K AND 3K!!!!
@HyperGamerStuds lol, of course ur follower count engine :)
@JonDoeBeep same
I do scratch too, but I'm better here. I'm (@senorbomby) @ExplosionScratc
@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/
@ExplosionScratc How many people have Scratch & Repl.it accounts. ('Cause I do)
@looserty Lol me too! (Though i don't use it anymore)
join the bot repl @ExplosionScratc
https://repl.it/talk/share/HIGHLY-ADVANCED-TOP-DOWN-IO-SHOOTER/58424 @ExplosionScratc
@ExplosionScratc Your Scratch projects are as great as your repls (and your repls are really good!). My username on Scratch is @10greg.
@ExplosionScratc Hey I do scratch too! My username is DREWNOLT