This time we are going to share another creative and pure CSS3 petal-style Loading loading animation. Its appearance is a small petal-shaped icon. When the page loads, the small petal icon will rotate continuously and a progress bar will be displayed under the petals.
Advertisement
<div class="out"> <div class="fade-in"> <div class="container"> <div class="one common"></div> <div class="two common"></div> <div class="three common"></div> <div class="four common"></div> <div class="five common"></div> <div class="six common"></div> <div class="seven common"></div> <div class="eight common"></div> </div> <div class="bar"> <div class="progress"></div> </div> </div> </div>
.container { width: 40vw; height: 40vw; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .common { height: 5vw; max-height: 100%; overflow: auto; width: 2vw; margin: auto; max-width: 100%; position: absolute; background-color: ; border-radius: 0vw 10vw 0vw 10vw; box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0; } .one { transform: rotate(45deg); left: 0; right: 0; top: 0; bottom: 7.5vw; } .two { transform: rotate(90deg); left: 5.5vw; right: 0; top: 0; bottom: 5.5vw; }
Advertisement