DJI video loading animation by CSS3 animation

Use the time to pay attention to compatibility, modern browser chrome, FF, Edge and mobile side are all right, ie 9 or less.

The code is as follows:

CSS Styles

. 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>