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