diff --git a/src/components/loader/loader.css b/src/components/loader/loader.css
index 68f8e5f4f08f852f5f1ac3c968d30e5c33729a8e..8ebbdb5cfe9d47e7a9eb880ee66e38272c8d86d4 100644
--- a/src/components/loader/loader.css
+++ b/src/components/loader/loader.css
@@ -29,19 +29,18 @@
     margin-top: -4px;
 }
 
-.topBlock {
+.top-block {
     animation: top-slide-in 1.5s ease infinite;
 }
 
-.middleBlock {
+.middle-block {
     animation: middle-slide-in 1.5s ease infinite;
 }
 
-.bottomBlock {
+.bottom-block {
     animation: bottom-slide-in 1.5s ease infinite;
 }
 
-
 @keyframes top-slide-in {
   0% {
     transform: translateY(50px);
@@ -87,3 +86,17 @@
     opacity: 1;
   }
 }
+
+.message-container-outer {
+    height: 30px;
+    overflow: hidden;
+}
+
+.message-container-inner {
+    transition: transform 0.5s;
+}
+
+.message {
+    height: 20px;
+    margin: 5px 0;
+}
diff --git a/src/components/loader/loader.jsx b/src/components/loader/loader.jsx
index 8a93e5c36abd385665c9fcdd1374f30096d9c0a8..9da2eb3838e4ef8f98db2c64304ae016d1359dcd 100644
--- a/src/components/loader/loader.jsx
+++ b/src/components/loader/loader.jsx
@@ -5,140 +5,174 @@ import styles from './loader.css';
 import topBlock from './top-block.svg';
 import middleBlock from './middle-block.svg';
 import bottomBlock from './bottom-block.svg';
+const messages = [
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Creating blocks …"
+                description="One of the loading messages"
+                id="gui.loader.message1"
+            />
+        ),
+        weight: 50
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Loading sprites …"
+                description="One of the loading messages"
+                id="gui.loader.message2"
+            />
+        ),
+        weight: 50
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Loading sounds …"
+                description="One of the loading messages"
+                id="gui.loader.message3"
+            />
+        ),
+        weight: 50
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Loading extensions …"
+                description="One of the loading messages"
+                id="gui.loader.message4"
+            />
+        ),
+        weight: 50
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Creating blocks …"
+                description="One of the loading messages"
+                id="gui.loader.message1"
+            />
+        ),
+        weight: 20
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Herding cats …"
+                description="One of the loading messages"
+                id="gui.loader.message5"
+            />
+        ),
+        weight: 1
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Transmitting nanos …"
+                description="One of the loading messages"
+                id="gui.loader.message6"
+            />
+        ),
+        weight: 1
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Inflating gobos …"
+                description="One of the loading messages"
+                id="gui.loader.message7"
+            />
+        ),
+        weight: 1
+    },
+    {
+        message: (
+            <FormattedMessage
+                defaultMessage="Preparing emojis …"
+                description="One of the loading messages"
+                id="gui.loader.message8"
+            />
+        ),
+        weight: 1
+    }
+];
 
-const LoaderComponent = () => {
-    const messages = [
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Creating blocks …"
-                    description="One of the loading messages"
-                    id="gui.loader.message1"
-                />
-            ),
-            weight: 50
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Loading sprites …"
-                    description="One of the loading messages"
-                    id="gui.loader.message2"
-                />
-            ),
-            weight: 50
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Loading sounds …"
-                    description="One of the loading messages"
-                    id="gui.loader.message3"
-                />
-            ),
-            weight: 50
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Loading extensions …"
-                    description="One of the loading messages"
-                    id="gui.loader.message4"
-                />
-            ),
-            weight: 50
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Creating blocks …"
-                    description="One of the loading messages"
-                    id="gui.loader.message1"
-                />
-            ),
-            weight: 20
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Herding cats …"
-                    description="One of the loading messages"
-                    id="gui.loader.message5"
-                />
-            ),
-            weight: 1
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Transmitting nanos …"
-                    description="One of the loading messages"
-                    id="gui.loader.message6"
-                />
-            ),
-            weight: 1
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Inflating gobos …"
-                    description="One of the loading messages"
-                    id="gui.loader.message7"
-                />
-            ),
-            weight: 1
-        },
-        {
-            message: (
-                <FormattedMessage
-                    defaultMessage="Preparing emojiis …"
-                    description="One of the loading messages"
-                    id="gui.loader.message8"
-                />
-            ),
-            weight: 1
-        }
-    ];
+class LoaderComponent extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            messageNumber: 0
+        };
+    }
+    componentDidMount () {
+        this.chooseRandomMessage();
 
-    let message;
-    const sum = messages.reduce((acc, m) => acc + m.weight, 0);
-    let rand = sum * Math.random();
-    for (let i = 0; i < messages.length; i++) {
-        rand -= messages[i].weight;
-        if (rand <= 0) {
-            message = messages[i].message;
-            break;
+        // Start an interval to choose a new message every 5 seconds
+        this.intervalId = setInterval(() => {
+            this.chooseRandomMessage();
+        }, 5000);
+    }
+    componentWillUnmount () {
+        clearInterval(this.intervalId);
+    }
+    chooseRandomMessage () {
+        let messageNumber;
+        const sum = messages.reduce((acc, m) => acc + m.weight, 0);
+        let rand = sum * Math.random();
+        for (let i = 0; i < messages.length; i++) {
+            rand -= messages[i].weight;
+            if (rand <= 0) {
+                messageNumber = i;
+                break;
+            }
         }
+        this.setState({messageNumber});
     }
-
-    return (
-        <div className={styles.background}>
-            <div className={styles.container}>
-                <div className={styles.blockAnimation}>
-                    <img
-                        className={styles.topBlock}
-                        src={topBlock}
-                    />
-                    <img
-                        className={styles.middleBlock}
-                        src={middleBlock}
-                    />
-                    <img
-                        className={styles.bottomBlock}
-                        src={bottomBlock}
-                    />
+    render () {
+        return (
+            <div className={styles.background}>
+                <div className={styles.container}>
+                    <div className={styles.blockAnimation}>
+                        <img
+                            className={styles.topBlock}
+                            src={topBlock}
+                        />
+                        <img
+                            className={styles.middleBlock}
+                            src={middleBlock}
+                        />
+                        <img
+                            className={styles.bottomBlock}
+                            src={bottomBlock}
+                        />
+                    </div>
+                    <h1 className={styles.title}>
+                        <FormattedMessage
+                            defaultMessage="Loading Project"
+                            description="Main loading message"
+                            id="gui.loader.headline"
+                        />
+                    </h1>
+                    <div className={styles.messageContainerOuter}>
+                        <div
+                            className={styles.messageContainerInner}
+                            style={{transform: `translate(0, -${this.state.messageNumber * 25}px)`}}
+                        >
+                            {messages.map((m, i) => (
+                                <div
+                                    className={styles.message}
+                                    key={i}
+                                >
+                                    {m.message}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
                 </div>
-                <h1 className={styles.title}>
-                    <FormattedMessage
-                        defaultMessage="Loading Project"
-                        description="Main loading message"
-                        id="gui.loader.headline"
-                    />
-                </h1>
-                <p>{message}</p>
             </div>
-        </div>
-    );
-};
+        );
+    }
+}
 
 export default LoaderComponent;