Pure CSS Write Love version loading effect, waiting for loading is also a kind of enjoyment

Now the internet era of many sites, each has its own style, but what kind of style can retain the user's stay to watch it? As far as loading is concerned, many loading effects are the same style may users often visit the site has been accustomed to, if your load time than other sites longer, the effect is the same, may be turned off your site to other sites to watch, but if your loading effect is unique, there are characteristics, You may see your website open when you load the effect, so users won't be able to shut down your website right away.

HTML code:

<div class="flex-container">  <div class="unit">    <div class="heart">      <div class="heart-piece-0"></div>      <div class="heart-piece-1"></div>      <div class="heart-piece-2"></div>      <div class="heart-piece-3"></div>      <div class="heart-piece-4"></div>      <div class="heart-piece-5"></div>      <div class="heart-piece-6"></div>      <div class="heart-piece-7"></div>      <div class="heart-piece-8"></div>    </div>    <p>equal love</p>  </div></div>

CSS code:

  <style> @import url ("https://fonts.googleapis.com/css?family=Lato:100"); html,body {width:100%; height:100%;}.  Flex-container {width:100%;  height:100%;  position:relative;  Display:-webkit-box;  Display:-ms-flexbox;  Display:flex;      -ms-flex-wrap:wrap;  Flex-wrap:wrap;      -webkit-box-pack:center;          -ms-flex-pack:center;  Justify-content:center;      -webkit-box-align:center;          -ms-flex-align:center; Align-items:center;} Body {background-color: #262e6f;}. unit {text-align:center;}.  Unit p {margin-top:100px;  font-family: ' Lato ', Sans-serif;  font-weight:100;  Text-transform:uppercase; Color: #fff;}.  Heart {position:relative;  font-size:0; width:138px;} [class*= "heart-piece-"]  {Position:absolute;  Top: -5px;  width:10px;  height:10px; border-radius:5px;}.          heart-piece-4 {-webkit-animation:piece-4 3.2s infinite; Animation:piece-4 3.2s Infinite;}. heart-piece-3,.heart-piece-5 {-webkit-animation:piece-3 3.2sInfinite Animation:piece-3 3.2s Infinite;}.          heart-piece-2,.heart-piece-6 {-webkit-animation:piece-2 3.2s infinite; Animation:piece-2 3.2s Infinite;}.          heart-piece-1,.heart-piece-7 {-webkit-animation:piece-1 3.2s infinite; Animation:piece-1 3.2s Infinite;}.          heart-piece-0,.heart-piece-8 {-webkit-animation:piece-0 3.2s infinite; Animation:piece-0 3.2s Infinite;}.  heart-piece-0 {left:0px;          -webkit-animation-delay:0s;  animation-delay:0s; Background-color: #ec2d73;}.  heart-piece-1 {left:16px;          -webkit-animation-delay:0.15s;  animation-delay:0.15s; Background-color: #eb5324;}.  heart-piece-2 {left:32px;          -webkit-animation-delay:0.3s;  animation-delay:0.3s; Background-color: #fdc800;}.  heart-piece-3 {left:48px;          -webkit-animation-delay:0.45s;  animation-delay:0.45s; Background-color: #47b264;}.  heart-piece-4 {left:64px;          -webkit-animation-delay:0.6s;  animation-delay:0.6s; background-Color: #1470bd;}.  heart-piece-5 {left:80px;          -webkit-animation-delay:0.75s;  animation-delay:0.75s; Background-color: #76469a;}.  heart-piece-6 {left:96px;          -webkit-animation-delay:0.9s;  animation-delay:0.9s; Background-color: #ec2d73;}.  heart-piece-7 {left:112px;          -webkit-animation-delay:1.05s;  animation-delay:1.05s; Background-color: #eb5324;}.  heart-piece-8 {left:128px;          -webkit-animation-delay:1.2s;  Animation-delay:1.2s; Background-color: #fdc800;}    @-webkit-keyframes piece-4 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:94px;  Top: -23px;    }} @keyframes piece-4 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:94px;  Top: -23px;    }}@-webkit-keyframes piece-3 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:90px;  Top: -31px;    }} @keyframes piece-3 {0, 10%, 90%, 100% {height:10px;  Top: -5px; } 45%, 55% {height:90px  Top: -31px;    }}@-webkit-keyframes piece-2 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:80px;  Top: -37px;    }} @keyframes piece-2 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:80px;  Top: -37px;    }}@-webkit-keyframes piece-1 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:60px;  Top: -31px;    }} @keyframes piece-1 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:60px;  Top: -31px;    }}@-webkit-keyframes piece-0 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:30px;  Top: -15px;    }} @keyframes piece-0 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:30px;  Top: -15px; }} </style>

If there are front-end programmers interested in front end, you can join our web front-end technology Learning Group Oh 1893,94454. Will send the front-end of the boutique tutorial Oh!

Pure CSS Write Love version loading effect, waiting for loading is also a kind of enjoyment