jonathan/combine.fm
jonathan/combine.fm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Improve album artwork, loading animation

Browse source
This commit is contained in:
Jonathan Cremin 2015-01-10 19:39:54 +00:00
parent c56e66e12b
commit 195e116670
4 changed files with 55 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

22
public/images/eq.svg Normal file
View file

@ -0,0 +1,22 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="5" width="4" height="20" fill="#FE4365">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0s" dur="0.45s" repeatCount="indefinite" />
</rect>
<rect x="10" y="5" width="4" height="20" fill="#FE4365">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0.15s" dur="0.45s" repeatCount="indefinite" />
</rect>
<rect x="20" y="5" width="4" height="20" fill="#FE4365">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0.3s" dur="0.45s" repeatCount="indefinite" />
</rect>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 979 B

26
public/stylesheets/style.css
View file

@ -134,17 +134,33 @@ h3 {
border-radius: 5px;
background: #eee;
}
.album-artwork {
.artwork {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
margin-bottom: 10px;
background-repeat: none;
background-size: cover;
border-radius: 5px;
}
.not-found {
opacity: 0.3;
opacity: 0.2;
}
.loading-wrap {
position: absolute;
top: 0;left: 0;
background: #fff;
height: 100%;
width: 100%;
opacity: 0.8;
}
.loading {
position: absolute;
top: 33%;
left: 33%;
width: 33%;
top: 35%;
left: 40%;
width: 20%;
}
.service-link {
text-align: center;