@Praashoo7
Currently Playing
Time in a Bottle
Jim Corce
My Way
Frank Sinatra
Lemon Tree
Fools Garden
#media#card#spotify#now playing
#e8e8e82.4K views
CSSAdd prefixes
1.main { 2 background-color: white; 3 padding: 1em; 4 padding-bottom: 1.1em; 5 border-radius: 15px; 6 margin: 1em; 7} 8 9.loader { 10 display: flex; 11 flex-direction: row; 12 height: 4em; 13 padding-left: 1em; 14 padding-right: 1em; 15 transform: rotate(180deg); 16 justify-content: right; 17 border-radius: 10px; 18 transition: .4s ease-in-out; 19} 20 21.loader:hover { 22 cursor: pointer; 23 background-color: lightgray; 24} 25 26.currentplaying { 27 display: flex; 28 margin: 1em; 29} 30 31.spotify { 32 width: 50px; 33 height: 50px; 34 margin-right: 0.6em; 35} 36 37.heading { 38 color: black; 39 font-size: 1.1em; 40 font-weight: bold; 41 align-self: center; 42} 43 44.loading { 45 display: flex; 46 margin-top: 1em; 47 margin-left: 0.3em; 48} 49 50.load { 51 width: 2px; 52 height: 33px; 53 background-color: limegreen; 54 animation: 1s move6 infinite; 55 border-radius: 5px; 56 margin: 0.1em; 57} 58 59.load:nth-child(1) { 60 animation-delay: 0.2s; 61} 62 63.load:nth-child(2) { 64 animation-delay: 0.4s; 65} 66 67.load:nth-child(3) { 68 animation-delay: 0.6s; 69} 70 71.play { 72 position: relative; 73 left: 0.35em; 74 height: 1.6em; 75 width: 1.6em; 76 clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%); 77 background-color: black; 78 transform: rotate(-90deg); 79 align-self: center; 80 margin-top: 0.7em; 81 justify-self: center; 82} 83 84.albumcover { 85 position: relative; 86 margin-right: 1em; 87 height: 40px; 88 width: 40px; 89 background-color: rgb(233, 232, 232); 90 align-self: center; 91 border-radius: 5px; 92} 93 94.song { 95 position: relative; 96 transform: rotate(180deg); 97 margin-right: 1em; 98 color: black; 99 align-self: center; 100} 101 102.artist { 103 font-size: 0.6em; 104} 105 106@keyframes move6 { 107 0% { 108 height: 0.2em; 109 } 110 111 25% { 112 height: 0.7em; 113 } 114 115 50% { 116 height: 1.5em; 117 } 118 119 100% { 120 height: 0.2em; 121 } 122}
HTML
1<div class="main"> 2 <div class="currentplaying"> 3 <svg height="50px" width="50px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="spotify"><radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -534)" r="43.888" cy="572.064" cx="33.34" id="ipdIa4~cOclR8yt_ClW93a"><stop stop-color="#f4e9c3" offset="0"></stop><stop stop-color="#f8eecd" offset=".219"></stop><stop stop-color="#fdf4dc" offset=".644"></stop><stop stop-color="#fff6e1" offset="1"></stop></radialGradient><path d="M51.03,37.34c0.16,0.98,1.08,1.66,2.08,1.66h5.39c2.63,0,4.75,2.28,4.48,4.96 C62.74,46.3,60.64,48,58.29,48H49c-1.22,0-2.18,1.08-1.97,2.34c0.16,0.98,1.08,1.66,2.08,1.66h8.39c1.24,0,2.37,0.5,3.18,1.32 C61.5,54.13,62,55.26,62,56.5c0,2.49-2.01,4.5-4.5,4.5h-49c-1.52,0-2.9-0.62-3.89-1.61C3.62,58.4,3,57.02,3,55.5 C3,52.46,5.46,50,8.5,50H14c1.22,0,2.18-1.08,1.97-2.34C15.81,46.68,14.89,44,13.89,44H5.5c-2.63,0-4.75-2.28-4.48-4.96 C1.26,36.7,3.36,35,5.71,35H8c1.71,0,3.09-1.43,3-3.16C10.91,30.22,9.45,29,7.83,29H4.5c-2.63,0-4.75-2.28-4.48-4.96 C0.26,21.7,2.37,20,4.71,20H20c0.83,0,1.58-0.34,2.12-0.88C22.66,18.58,23,17.83,23,17c0-1.66-1.34-3-3-3h-1.18 c-0.62-0.09-1.43,0-2.32,0h-9c-1.52,0-2.9-0.62-3.89-1.61S2,10.02,2,8.5C2,5.46,4.46,3,7.5,3h49c3.21,0,5.8,2.79,5.47,6.06 C61.68,11.92,60.11,14,57.24,14H52c-2.76,0-5,2.24-5,5c0,1.38,0.56,2.63,1.46,3.54C49.37,23.44,50.62,24,52,24h6.5 c3.21,0,5.8,2.79,5.47,6.06C63.68,32.92,61.11,35,58.24,35H53C51.78,35,50.82,36.08,51.03,37.34z" fill="url(#ipdIa4~cOclR8yt_ClW93a)"></path><linearGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -534)" y2="590.253" y1="530.096" x2="32" x1="32" id="ipdIa4~cOclR8yt_ClW93b"><stop stop-color="#42d778" offset="0"></stop><stop stop-color="#3dca76" offset=".428"></stop><stop stop-color="#34b171" offset="1"></stop></linearGradient><path d="M57,32c0,12.837-9.663,23.404-22.115,24.837C33.942,56.942,32.971,57,32,57 c-1.644,0-3.25-0.163-4.808-0.471C15.683,54.298,7,44.163,7,32C7,18.192,18.192,7,32,7S57,18.192,57,32z" fill="url(#ipdIa4~cOclR8yt_ClW93b)"></path><path d="M41.683,44.394c-0.365,0-0.731-0.181-1.096-0.365c-3.471-2.009-7.674-3.105-12.24-3.105 c-2.559,0-5.116,0.364-7.491,0.912c-0.365,0-0.914,0.183-1.096,0.183c-0.914,0-1.461-0.732-1.461-1.462 c0-0.913,0.547-1.463,1.279-1.643c2.923-0.732,5.846-1.096,8.951-1.096c5.116,0,9.866,1.276,13.885,3.655 c0.548,0.364,0.914,0.73,0.914,1.642C43.145,43.847,42.414,44.394,41.683,44.394z M44.241,38.181c-0.547,0-0.912-0.18-1.279-0.364 c-3.835-2.375-9.135-3.839-15.163-3.839c-2.924,0-5.664,0.366-7.674,0.916c-0.549,0.18-0.731,0.18-1.096,0.18 c-1.096,0-1.827-0.912-1.827-1.826c0-1.096,0.549-1.645,1.461-2.009c2.74-0.73,5.481-1.279,9.317-1.279 c6.213,0,12.241,1.463,16.991,4.384c0.73,0.364,1.096,1.096,1.096,1.826C46.069,37.269,45.337,38.181,44.241,38.181z M47.165,30.876 c-0.548,0-0.731-0.182-1.279-0.364c-4.385-2.559-10.961-4.021-17.356-4.021c-3.289,0-6.577,0.366-9.5,1.096 c-0.366,0-0.731,0.182-1.279,0.182c-1.279,0.183-2.193-0.912-2.193-2.192c0-1.279,0.731-2.009,1.644-2.192 c3.471-1.096,7.125-1.462,11.327-1.462c6.943,0,14.25,1.462,19.731,4.567c0.73,0.366,1.278,1.096,1.278,2.193 C49.357,29.961,48.442,30.876,47.165,30.876z" fill="#fff"></path></svg> 4 <p class="heading">Currently Playing</p> 5 </div> 6 <div class="loader"> 7 <div class="song"> 8 <p class="name">Time in a Bottle</p> 9 <p class="artist">Jim Corce</p> 10 </div> 11 <div class="albumcover"></div> 12 <div class="loading"> 13 <div class="load"></div> 14 <div class="load"></div> 15 <div class="load"></div> 16 <div class="load"></div> 17 </div> 18 </div> 19 <div class="loader"> 20 <div class="song"> 21 <p class="name">My Way</p> 22 <p class="artist">Frank Sinatra</p> 23 </div> 24 <div class="albumcover"></div> 25 <div class="play"></div> 26 </div> 27 <div class="loader"> 28 <div class="song"> 29 <p class="name">Lemon Tree</p> 30 <p class="artist">Fools Garden</p> 31 </div> 32 <div class="albumcover"></div> 33 <div class="play"></div> 34 </div> 35</div>