723 views
CSSAdd prefixes
1loader-box { 2 background: #fff; 3 top: 50%; 4 left: 50%; 5 position: absolute; 6 transform: translate(-50%, -50%); 7} 8 9.loading-wrapper { 10 width: 80px; 11 height: 80px; 12 border-radius: 50%; 13} 14 15.loading-wrapper .loader { 16 height: 80px; 17 width: 80px; 18 border: 3px solid #e5e5e5; 19 border-radius: 50%; 20 -webkit-animation: pulse1572 1200ms ease-in-out; 21 animation: pulse1572 1200ms ease-in-out; 22 -webkit-animation-iteration-count: infinite; 23 animation-iteration-count: infinite; 24} 25 26.loading-wrapper .loader .loader-inner { 27 display: block; 28 height: 40px; 29 width: 40px; 30 position: absolute; 31 top: 50%; 32 left: 50%; 33 -webkit-transform: translateX(-50%) translateY(-50%); 34 transform: translateX(-50%) translateY(-50%); 35 background: linear-gradient(180deg, rgb(0, 140, 255) 0%, rgb(218, 67, 218) 100%); 36 -webkit-transform-origin: 50% 50%; 37 transform-origin: 50% 50%; 38 border-radius: 50%; 39 -webkit-animation: innerPulse934 1200ms ease-in-out; 40 animation: innerPulse934 1200ms ease-in-out; 41 -webkit-animation-iteration-count: infinite; 42 animation-iteration-count: infinite; 43 -webkit-animation-delay: 600ms; 44 animation-delay: 600ms; 45 box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); 46} 47 48@keyframes pulse1572 { 49 0% { 50 border: 3px solid #fff; 51 } 52 53 50% { 54 border: 40px solid #fff; 55 } 56 57 100% { 58 border: 3px solid #fff; 59 } 60} 61 62@keyframes innerPulse934 { 63 0% { 64 height: 30px; 65 width: 30px; 66 } 67 68 50% { 69 height: 53.33333px; 70 width: 53.33333px; 71 } 72 73 100% { 74 height: 30px; 75 width: 30px; 76 } 77}
HTML
1<div class="loader-box"> 2 <div class="loading-wrapper"> 3 <div class="loader"> 4 <div class="loader-inner"> 5 </div> 6 </div> 7 </div> 8</div>