Loader by arshshaikh06
#212121
1.shimmer { 2 position: relative; 3 background: #3a3a3a; 4 background-image: linear-gradient(to right, #3a3a3a 0%, #3f3f3f 10%, #4a4a4a 20%, #3f3f3f 30%, #3a3a3a 50%, #3a3a3a 100%); 5 background-repeat: no-repeat; 6 background-size: 800px 200px; 7 -webkit-animation-duration: 1s; 8 -webkit-animation-fill-mode: forwards; 9 -webkit-animation-iteration-count: infinite; 10 -webkit-animation-name: shimmer; 11 -webkit-animation-timing-function: ease-in-out; 12} 13 14@-webkit-keyframes shimmer { 15 0% { 16 background-position: -400px 0; 17 } 18 19 100% { 20 background-position: 400px 0; 21 } 22} 23 24#container { 25 width: 400px; 26 height: 200px; 27 display: flex; 28 justify-content: center; 29 align-items: center; 30} 31 32#square { 33 width: 135px; 34 height: 135px; 35} 36 37#content { 38 flex: 1; 39 height: 150px; 40 width: 100%; 41 padding: 0.5rem 1rem 0 1rem; 42 display: flex; 43 flex-direction: column; 44 justify-content: space-between; 45 align-items: flex-end; 46} 47 48#content-title { 49 width: 100%; 50 height: 30px; 51 margin-bottom: 1rem; 52} 53 54#content-desc { 55 width: 100%; 56 height: 100%; 57 display: flex; 58 flex-direction: column; 59 justify-content: space-evenly; 60 align-items: flex-end; 61} 62 63.line { 64 width: 100%; 65 height: 10px; 66}
805 views
805 views
MIT License