#e8e8e8
1.card { 2 width: 190px; 3 height: 90px; 4 background: #ffff; 5 box-shadow: 0 1px 25px rgba(0,0,0,0.2); 6 position: absolute; 7 transform: translate(-50%, -50%); 8 top: 50%; 9 left: 50%; 10 padding: 12px 10px; 11} 12 13.card_load { 14 width: 70px; 15 height: 70px; 16 position: relative; 17 float: left; 18 background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 19 40%, #e5e5e5 48%); 20 border-radius: 50%; 21 background-size: 200% 100%; 22 background-position: 100% 0; 23 animation: load89234 2s infinite; 24} 25 26.card_load_extreme_title { 27 width: 90px; 28 height: 10px; 29 position: relative; 30 float: right; 31 border-radius: 5px; 32 background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 33 40%, #e5e5e5 48%); 34 background-size: 200% 100%; 35 background-position: 100% 0; 36 animation: load89234 2s infinite; 37} 38 39.card_load_extreme_descripion { 40 width: 90px; 41 height: 47px; 42 position: relative; 43 float: right; 44 border-radius: 5px; 45 background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 46 40%, #e5e5e5 48%); 47 margin-top: 10px; 48 background-size: 200% 100%; 49 background-position: 100% 0; 50 animation: load89234 2s infinite; 51} 52 53@keyframes load89234 { 54 100% { 55 background-position: -100% 0; 56 } 57}
13K views
13K views
Comments
MIT License