secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Loading library albums as process; Processes loader for less jammy animation

Browse Source
This commit is contained in:
James Barnsley
2017-08-10 12:00:08 +12:00
parent fcf44d0b28
commit fd46929ac3
11 changed files with 151 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/scss/components/_loader.scss
View File

@ -1,4 +1,44 @@
.loader {
height: 120px;
width: 120px;
margin: 0 auto;
position: relative;
opacity: 0;
&:before,
&:after {
content: '';
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
box-sizing: border-box;
border: {
radius: 100%;
style: solid;
width: 2px;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
border: {
color: lighten($dark_grey, 5%);
}
}
&:after {
@include spin();
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: $blue;
}
}
.body-loader {
padding: 35vh 0;
@ -8,46 +48,6 @@
}
}
.loader {
height: 120px;
width: 120px;
margin: 0 auto;
position: relative;
opacity: 0;
&:before,
&:after {
content: '';
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
box-sizing: border-box;
border: {
radius: 100%;
style: solid;
width: 2px;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
border: {
color: lighten($dark_grey, 5%);
}
}
&:after {
@include spin();
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: $blue;
}
}
&.lazy-loader {
padding: 20px;
height: 40px;

28
src/scss/components/_notifications.scss
View File

@ -64,25 +64,27 @@
&.process {
position: relative;
padding-right: 18px;
padding-left: 50px;
&.cancelling {
color: rgba(255,255,255,0.5);
}
&:after {
pointer-events: none;
.loader {
width: 20px;
height: 20px;
position: absolute;
display: block;
content: '';
background: $white;
opacity: 0.15;
animation: slideloader 1s infinite;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border-radius: 0 0 3px 3px;
top: 16px;
left: 18px;
opacity: 1;
&:before {
border-color: transparent;
}
&:after {
border-right-color: $white;
}
}
}
}