3.9K views
1.loader { 2 position: relative; 3 width: 240px; 4 height: 130px; 5 margin-bottom: 10px; 6 border: 1px solid #d3d3d3; 7 padding: 15px; 8 background-color: #e3e3e3; 9 overflow: hidden; 10} 11 12.loader:after { 13 content: ""; 14 position: absolute; 15 width: 100%; 16 height: 100%; 17 top: 0; 18 left: 0; 19 background: linear-gradient(110deg, rgba(227, 227, 227, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%); 20 animation: gradient-animation_2 1.2s linear infinite; 21} 22 23.loader .wrapper { 24 width: 100%; 25 height: 100%; 26 position: relative; 27} 28 29.loader .wrapper > div { 30 background-color: #cacaca; 31} 32 33.loader .circle { 34 width: 50px; 35 height: 50px; 36 border-radius: 50%; 37} 38 39.loader .button { 40 display: inline-block; 41 height: 32px; 42 width: 75px; 43} 44 45.loader .line-1 { 46 position: absolute; 47 top: 11px; 48 left: 58px; 49 height: 10px; 50 width: 100px; 51} 52 53.loader .line-2 { 54 position: absolute; 55 top: 34px; 56 left: 58px; 57 height: 10px; 58 width: 150px; 59} 60 61.loader .line-3 { 62 position: absolute; 63 top: 57px; 64 left: 0px; 65 height: 10px; 66 width: 100%; 67} 68 69.loader .line-4 { 70 position: absolute; 71 top: 80px; 72 left: 0px; 73 height: 10px; 74 width: 92%; 75} 76 77@keyframes gradient-animation_2 { 78 0% { 79 transform: translateX(-100%); 80 } 81 82 100% { 83 transform: translateX(100%); 84 } 85}
MIT License