DJI official website video loading animation by css3 animation, css3

DJI official website video loading animation by css3 animation, css3

Some time ago, when I visited the DJI official website, I found that there was a very good pre-loaded animation, so I took it without a face. If you are interested, you can copy your shoes. Thank you to the front-end engineering masters of DJI.When using it, you must pay attention to compatibility. modern browsers such as chrome, ff, edge, and mobile terminals can all be used, but less than ie 9 won't work.

The Code is as follows:

Css style

.spinner {    margin: 0 auto;    width: 82px;    text-align: center;}#fancybox-loading {    position: fixed;    top: 50%;    left: 50%;    margin-top: -9px;    margin-left: -41px;    opacity: .8;    cursor: pointer;    z-index: 8060;}.spinner>div {    margin: 0 2px;    width: 18px;    height: 18px;    background-color: #333;    -webkit-border-radius: 100%;    -moz-border-radius: 100%;    -ms-border-radius: 100%;    -o-border-radius: 100%;    border-radius: 100%;    display: inline-block;     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;     -moz-animation: sk-bouncedelay 1.4s infinite ease-in-out both;    -ms-animation: sk-bouncedelay 1.4s infinite ease-in-out both;    -o-animation: sk-bouncedelay 1.4s infinite ease-in-out both;     animation: sk-bouncedelay 1.4s infinite ease-in-out both; }.spinner .bounce1 {    -webkit-animation-delay: -.32s;    -moz-animation-delay: -.32s;    -ms-animation-delay: -.32s;    -o-animation-delay: -.32s;    animation-delay: -.32s;}    .spinner .bounce2 {    -webkit-animation-delay: -.16s;    -moz-animation-delay: -.16s;    -ms-animation-delay: -.16s;    -o-animation-delay: -.16s;    animation-delay: -.16s;}@keyframes sk-bouncedelay {    0%,80%,100% {        -webkit-transform: scale(0);        -moz-transform: scale(0);        -ms-transform: scale(0);        -o-transform: scale(0);        transform: scale(0)    }    40% {        -webkit-transform: scale(1);        -moz-transform: scale(1);        -ms-transform: scale(1);        -o-transform: scale(1);        transform: scale(1)    }}

Html Structure

<div id="fancybox-loading" class="spinner">    <div class="bounce1"></div>    <div class="bounce2"></div>    <div class="bounce3"></div></div>