Today I will bring you another pure CSS3 Loading animation that simulates Google. There are 6 animation effects in total.
Advertisement
<div class="content"> <div class="column"> <div class="container animation-1"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> </div> <div class="column"> <div class="container animation-2"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> </div> <div class="column"> <div class="container animation-3"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> </div> <div class="column"> <div class="container animation-4"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> </div> <div class="column"> <div class="container animation-5"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> </div> <div class="column"> <div class="container animation-6"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> </div> </div>
* { box-sizing: border-box; } h1 { text-align: center; color: white; font-size: 60px; font-weight: 300; margin-bottom: 30px; } .content { max-width: 600px; margin: auto; padding: 5px; height: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-content: flex-start; } .content .column { width: calc(33.33% - 10px); height: 170px; background-color: #040038; margin: 5px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; }
Advertisement