Edit in JSFiddle


              
    <section>
        <div class="container">
            <div class="loading">
                <div class="loading-box">
                    <div class="object" id="one"></div>
                    <div class="object" id="two"></div>
                    <div class="object" id="three"></div>
                    <div class="object" id="four"></div>
                    <div class="object" id="five"></div>
                    <div class="object" id="six"></div>
                    <div class="object" id="seven"></div>
                    <div class="object" id="eight"></div>
                    <div class="object" id="big-center"></div>
                </div>
            </div>

            <div class="description">
                <div class="loading-text">
                    <span class='letter'>P</span> <span class='letter'>R</span> <span class='letter'>E</span> <span class='letter'>P</span> <span class='letter'>A</span> <span class='letter'>R</span> <span class='letter'>I</span>
                    <span class='letter'>N</span> <span class='letter'>G</span>
                </div>
            </div>
        </div>
    </section>
       body {
         margin: 0;
         padding: 0;
         background-color: #232323;
       }

       .container {
         /* display: flex; */
         /* justify-content: center; */
       }

       .loading {
         width: 100%;
         position: relative;
         margin-top: 20%;
       }

       .loading-box {
         width: 200px;
         /* border: 1px solid #f40; */
         transform: rotate(45deg);
         position: relative;
         left: calc(50% - 100px);
         /* left: 50%; */
         height: 200px;
       }

       .object {
         width: 20px;
         height: 20px;
         background-color: aquamarine;
         position: absolute;
         box-shadow: 0px 0px 20px 1px cyan
       }

       #one {
         animation: object_one 2s infinite;
         animation-delay: .1s;
       }

       #two {
         animation: object_two 2s infinite;
         animation-delay: .2s;
       }

       #three {
         animation: object_three 2s infinite;
         animation-delay: .3s;
       }

       #four {
         animation: object_four 2s infinite;
         animation-delay: .4s;
       }

       #five {
         animation: object_five 2s infinite;
         animation-delay: .5s;
       }

       #six {
         animation: object_six 2s infinite;
         animation-delay: .6s;
       }

       #seven {
         animation: object_seven 2s infinite;
         animation-delay: .7s;
       }

       #eight {
         animation: object_eight 2s infinite;
         animation-delay: .8s;
       }

       #big-center {
         animation: object_big-center 2s infinite;
         animation-delay: .5s;
       }

       @keyframes object_big-center {
         50% {
           transform: scale(2.5);
         }
       }

       @keyframes object_eight {
         50% {
           transform: translate(65px, 0);
         }
       }

       @keyframes object_seven {
         50% {
           transform: translate(65px, 65px);
         }
       }

       @keyframes object_six {
         50% {
           transform: translate(0, 65px);
         }
       }

       @keyframes object_five {
         50% {
           transform: translate(-65px, 65px);
         }
       }

       @keyframes object_four {
         50% {
           transform: translate(-65px, 0);
         }
       }

       @keyframes object_three {
         50% {
           transform: translate(65px, -65px);
         }
       }

       @keyframes object_two {
         50% {
           transform: translate(0px, -65px);
         }
       }

       @keyframes object_one {
         50% {
           transform: translate(-65px, -65px);
         }
       }

       .description {
         display: flex;
         justify-content: center;
         text-shadow: 0px 0px 3px white;
         color: #fff;
         font-size: 24px;
       }

       .letter:nth-child(1) {
         -webkit-animation: fade 4s infinite 200ms;
         animation: fade 4s infinite 200ms;
       }

       .letter:nth-child(2) {
         -webkit-animation: fade 4s infinite 400ms;
         animation: fade 4s infinite 400ms;
       }

       .letter:nth-child(3) {
         -webkit-animation: fade 4s infinite 600ms;
         animation: fade 4s infinite 600ms;
       }

       .letter:nth-child(4) {
         -webkit-animation: fade 4s infinite 800ms;
         animation: fade 4s infinite 800ms;
       }

       .letter:nth-child(5) {
         -webkit-animation: fade 4s infinite 1000ms;
         animation: fade 4s infinite 1000ms;
       }

       .letter:nth-child(6) {
         -webkit-animation: fade 4s infinite 1200ms;
         animation: fade 4s infinite 1200ms;
       }

       .letter:nth-child(7) {
         -webkit-animation: fade 4s infinite 1400ms;
         animation: fade 4s infinite 1400ms;
       }

       .letter:nth-child(8) {
         -webkit-animation: fade 4s infinite 1600ms;
         animation: fade 4s infinite 1600ms;
       }

       .letter:nth-child(9) {
         -webkit-animation: fade 4s infinite 1800ms;
         animation: fade 4s infinite 1800ms;
       }

       .letter:nth-child(10) {
         -webkit-animation: fade 4s infinite 2000ms;
         animation: fade 4s infinite 2000ms;
       }

       .letter:nth-child(11) {
         -webkit-animation: fade 4s infinite 2200ms;
         animation: fade 4s infinite 2200ms;
       }

       @-webkit-keyframes fade {
         50% {
           opacity: 0.02;
         }
       }

       @keyframes fade {
         50% {
           opacity: 0.02;
         }
       }