diff --git a/src/components/loader/bottom-block.svg b/src/components/loader/bottom-block.svg deleted file mode 100644 index b397068c448..00000000000 --- a/src/components/loader/bottom-block.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - bottom-block - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/loader/loader.css b/src/components/loader/loader.css index 669329f0f77..e1609a2eaa6 100644 --- a/src/components/loader/loader.css +++ b/src/components/loader/loader.css @@ -36,131 +36,43 @@ .block-animation img { display: block; position: relative; - height: 30%; margin-top: -4px; + animation-name: bouncing; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-duration: 1s; + animation-delay: 0s; } -.top-block { - animation: top-slide-in 1.5s ease infinite; -} - -.middle-block { - animation: middle-slide-in 1.5s ease infinite; -} - -.bottom-block { - animation: bottom-slide-in 1.5s ease infinite; -} - -[dir="rtl"] .top-block { - animation: top-slide-in-rtl 1.5s ease infinite; -} - -[dir="rtl"] .middle-block { - animation: middle-slide-in-rtl 1.5s ease infinite; -} - -[dir="rtl"] .bottom-block { - animation: bottom-slide-in-rtl 1.5s ease infinite; -} - -@keyframes top-slide-in { - 0% { - transform: translateY(50px); - opacity: 0; - } - - 33% { - transform: translateY(0px); - opacity: 1; - } -} - -@keyframes middle-slide-in { - 0% { - transform: translateY(50px); - opacity: 0; - } - - 33% { - transform: translateY(50px); - opacity: 0; - } - - 66% { - transform: translateY(0px); - opacity: 1; - } -} - -@keyframes bottom-slide-in { - 0% { - transform: translateY(50px); - opacity: 0; - } - - 66% { - transform: translateY(50px); - opacity: 0; - } - - 100% { - transform: translateY(0px); - opacity: 1; - } -} - -@keyframes top-slide-in-rtl { - 0% { - transform: translateY(50px) scaleX(-1); - opacity: 0; - } - - 33% { - transform: translateY(0px) scaleX(-1); - opacity: 1; - } - 100% { - transform: translateY(0px) scaleX(-1); - opacity: 1; - } -} - -@keyframes middle-slide-in-rtl { - 0% { - transform: translateY(50px) scaleX(-1); - opacity: 0; - } - - 33% { - transform: translateY(50px) scaleX(-1); - opacity: 0; - } - - 66% { - transform: translateY(0px) scaleX(-1); - opacity: 1; - } - 100% { - transform: translateY(0px) scaleX(-1); - opacity: 1; - } -} - -@keyframes bottom-slide-in-rtl { +@keyframes bouncing { 0% { - transform: translateY(50px) scaleX(-1); - opacity: 0; + left: 0; + top: 0; + transform: rotate(0deg); + animation-timing-function: ease-out; + } + 25% { + left: 10px; + top: -50px; + transform: rotate(10deg); + animation-timing-function: ease-in; + } + 50% { + left: 0; + top: 0; + transform: rotate(0deg); + animation-timing-function: ease-out; + } + 75% { + left: -10px; + top: -50px; + transform: rotate(-10deg); + animation-timing-function: ease-in; } - - 66% { - transform: translateY(50px) scaleX(-1); - opacity: 0; - } - 100% { - transform: translateY(0px) scaleX(-1); - opacity: 1; + left: 0; + top: 0; + transform: rotate(0deg); } } diff --git a/src/components/loader/loader.jsx b/src/components/loader/loader.jsx index e0602846490..e712fffadf2 100644 --- a/src/components/loader/loader.jsx +++ b/src/components/loader/loader.jsx @@ -7,9 +7,7 @@ import styles from './loader.css'; import PropTypes from 'prop-types'; import bindAll from 'lodash.bindall'; import { tip } from '../../lib/randomUnhelpfulTip'; -import topBlock from './top-block.svg'; -import middleBlock from './middle-block.svg'; -import bottomBlock from './bottom-block.svg'; +import snail from './snail.svg' import * as progressMonitor from './tw-progress-monitor'; @@ -136,18 +134,7 @@ class LoaderComponent extends React.Component { >
- - - +
{mainMessages[this.props.messageId]} diff --git a/src/components/loader/middle-block.svg b/src/components/loader/middle-block.svg deleted file mode 100644 index 6e52d4213a9..00000000000 --- a/src/components/loader/middle-block.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - middle-block - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/loader/snail.svg b/src/components/loader/snail.svg new file mode 100644 index 00000000000..3e4a3905d87 --- /dev/null +++ b/src/components/loader/snail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/loader/top-block.svg b/src/components/loader/top-block.svg deleted file mode 100644 index 2b52a0d5d09..00000000000 --- a/src/components/loader/top-block.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - top-block - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/src/lib/randomUnhelpfulTip.js b/src/lib/randomUnhelpfulTip.js index 0d278106fc9..69a26121bd5 100644 --- a/src/lib/randomUnhelpfulTip.js +++ b/src/lib/randomUnhelpfulTip.js @@ -1,19 +1,19 @@ -export const tip = [ - 'Snail IDE is cool', - '@carters3421 on Scratch made the Purple Square Guy Sprite, its basically his mascot!', - 'Also check out LibreKitten!', - 'Snail IDE is based off the source code of PenguinMod, which is based off TurboWarp, which is based off Scratch. M O D C E P T I O N.', - 'Crazy? I was crazy once. They locked me in a room, a rubber room. A rubber room with rats. And rats make me crazy.', - "Snail IDE.", - "I LOVE PENGUINMOD!!!", - "In 2089, literally nothing will happen.", - "Did you know? You can post your projects outside of the Snail IDE community.", - "number 15 burger king foot lettuce", - "thepython555 the goat", - "Snails", - "penguinmod:menguinpod, snail-ide:ide-snail", - "If the creator of Snail IDE (Mr_rudy) enjoys your project, he will give you the COOL badge.", - "The first project to be uploaded that still exists is SnailGPT by Mr_rudy, keep in mind this lasted through over 3 server changes", - "Snail IDE Noticed ScratchDaPony :)", - "@redspacecat is remaking Geometry Dash in Snail IDE, with level sharing!" -]; +export const tip = [ + 'Snail IDE is cool', + '@carters3421 on Scratch made the Purple Square Guy Sprite, its basically his mascot!', + 'Also check out LibreKitten!', + 'Snail IDE is based off the source code of PenguinMod, which is based off TurboWarp, which is based off Scratch. M O D C E P T I O N.', + 'Crazy? I was crazy once. They locked me in a room, a rubber room. A rubber room with rats. And rats make me crazy.', + "Snail IDE.", + "I LOVE PENGUINMOD!!!", + "In 2089, literally nothing will happen.", + "Did you know? You can post your projects outside of the Snail IDE community.", + "number 15 burger king foot lettuce", + "thepython555 the goat", + "Snails", + "penguinmod:menguinpod, snail-ide:ide-snail", + "If the creator of Snail IDE (Mr_rudy) enjoys your project, he will give you the COOL badge.", + "The first project to be uploaded that still exists is SnailGPT by Mr_rudy, keep in mind this lasted through over 3 server changes", + "Snail IDE Noticed ScratchDaPony :)", + "@redspacecat is remaking Geometry Dash in Snail IDE, with level sharing!" +];