Loader by Shoh2008
#212121
1.loader { 2 position: relative; 3 width: 92px; 4 height: 180px; 5 border-radius: 8px; 6 transform: translateY(-30px); 7 background-color: #000; 8 background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%), 9 linear-gradient(#111, #111); 10 background-repeat: no-repeat; 11 background-size: 10px 10px , 84px 162px; 12 background-position: center 2px, 4px 8px; 13 animation: lightUp 6s linear infinite alternate; 14} 15 16.loader:before { 17 content: ''; 18 position: absolute; 19 left: 50%; 20 top: 190px; 21 transform: translateX(-50%); 22 width: 32px; 23 height: 75px; 24 background-image: linear-gradient(#fff, #fff), 25 linear-gradient(#bbb, #bbb), 26 linear-gradient(#fff, #fff); 27 background-repeat: no-repeat; 28 background-position: center 4px , center top, center 5px; 29 background-size: 11px 11px , 7px 4px , 2px 100%; 30 animation: plugin 6s linear infinite alternate; 31} 32 33.loader:after { 34 content: ''; 35 width: 30px; 36 height: 60px; 37 background-image: linear-gradient(#888, #888), 38 linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%), 39 linear-gradient(#15ff00, #15ff00), 40 linear-gradient(#888, #888); 41 background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px; 42 background-position: center 0 , center 6px , center bottom , center 4px; 43 background-repeat: no-repeat; 44 top: 50%; 45 left: 50%; 46 position: absolute; 47 transform: translate(-50% , -50%); 48 animation: charging 6s linear infinite alternate; 49} 50 51@keyframes charging { 52 0% , 25% { 53 opacity: 0; 54 background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px; 55 } 56 57 26% , 75% { 58 opacity: 1; 59 background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px; 60 } 61 62 50% , 100% { 63 opacity: 1; 64 background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px 65 } 66} 67 68@keyframes lightUp { 69 0% , 25% { 70 background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%), 71 linear-gradient(#111, #111); 72 } 73 74 26% , 100% { 75 background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%), 76 linear-gradient(#DDD, #DDD); 77 } 78} 79 80@keyframes plugin { 81 0% , 25% { 82 top: 190px; 83 background-position: center 4px , center top, center 5px; 84 } 85 86 26% , 100% { 87 background-position: center 0 , center top, center 5px; 88 top: 180px; 89 } 90} 91
921 views
921 views
MIT License