Skip to content

Commit

Permalink
Merge pull request #41 from seznam/white-loader
Browse files Browse the repository at this point in the history 
feat(loader): option to render loader in white version
  • Loading branch information
@mjancarik
mjancarik authored Jun 19, 2018
2 parents 1e91d04 + c358ff0 commit e8c51f2
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 33 deletions.
125 changes: 97 additions & 28 deletions src/atomAmp.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,39 +52,108 @@
height: 1em;

border-radius: 50%;
animation: atmLoader 1.1s infinite ease;
animation: 1.1s infinite ease;
}

@loader-color: #333;
@loader-color-rgb: 34;
@keyframes atmLoader {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em @loader-color, 1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 2.5em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.75em 1.75em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 0em 2.5em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em 1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -2.6em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5), -1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7), 1.8em -1.8em 0 0em @loader-color, 2.5em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.75em 1.75em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 0em 2.5em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em 1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -2.6em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5), 1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7), 2.5em 0em 0 0em @loader-color, 1.75em 1.75em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 0em 2.5em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em 1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -2.6em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5), 2.5em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7), 1.75em 1.75em 0 0em @loader-color, 0em 2.5em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em 1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -2.6em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 2.5em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5), 1.75em 1.75em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7), 0em 2.5em 0 0em @loader-color, -1.8em 1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -2.6em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 2.5em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.75em 1.75em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5), 0em 2.5em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7), -1.8em 1.8em 0 0em @loader-color, -2.6em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 2.5em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.75em 1.75em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 0em 2.5em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5), -1.8em 1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7), -2.6em 0em 0 0em @loader-color, -1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.8em -1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 2.5em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 1.75em 1.75em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), 0em 2.5em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.2), -1.8em 1.8em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.5), -2.6em 0em 0 0em rgba(@loader-color-rgb, @loader-color-rgb, @loader-color-rgb, 0.7), -1.8em -1.8em 0 0em @loader-color;
.atm-loader-animation-black {
animation-name: atmLoader-black;
}

.atm-loader-animation-white {
animation-name: atmLoader-white;
}

.loaderAnimation(@loader-color-name, @loader-color) {
@keyframesName: "atmLoader-@{loader-color-name}";

@keyframes @keyframesName {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em @loader-color,
1.8em -1.8em 0 0em fade(@loader-color, 20%),
2.5em 0em 0 0em fade(@loader-color, 20%),
1.75em 1.75em 0 0em fade(@loader-color, 20%),
0em 2.5em 0 0em fade(@loader-color, 20%),
-1.8em 1.8em 0 0em fade(@loader-color, 20%),
-2.6em 0em 0 0em fade(@loader-color, 50%),
-1.8em -1.8em 0 0em fade(@loader-color, 70%);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 70%),
1.8em -1.8em 0 0em @loader-color,
2.5em 0em 0 0em fade(@loader-color, 20%),
1.75em 1.75em 0 0em fade(@loader-color, 20%),
0em 2.5em 0 0em fade(@loader-color, 20%),
-1.8em 1.8em 0 0em fade(@loader-color, 20%),
-2.6em 0em 0 0em fade(@loader-color, 20%),
-1.8em -1.8em 0 0em fade(@loader-color, 50%);
}
25% {
box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 50%),
1.8em -1.8em 0 0em fade(@loader-color, 70%),
2.5em 0em 0 0em @loader-color,
1.75em 1.75em 0 0em fade(@loader-color, 20%),
0em 2.5em 0 0em fade(@loader-color, 20%),
-1.8em 1.8em 0 0em fade(@loader-color, 20%),
-2.6em 0em 0 0em fade(@loader-color, 20%),
-1.8em -1.8em 0 0em fade(@loader-color, 20%);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
1.8em -1.8em 0 0em fade(@loader-color, 50%),
2.5em 0em 0 0em fade(@loader-color, 70%),
1.75em 1.75em 0 0em @loader-color,
0em 2.5em 0 0em fade(@loader-color, 20%),
-1.8em 1.8em 0 0em fade(@loader-color, 20%),
-2.6em 0em 0 0em fade(@loader-color, 20%),
-1.8em -1.8em 0 0em fade(@loader-color, 20%);
}
50% {
box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
1.8em -1.8em 0 0em fade(@loader-color, 20%),
2.5em 0em 0 0em fade(@loader-color, 50%),
1.75em 1.75em 0 0em fade(@loader-color, 70%),
0em 2.5em 0 0em @loader-color,
-1.8em 1.8em 0 0em fade(@loader-color, 20%),
-2.6em 0em 0 0em fade(@loader-color, 20%),
-1.8em -1.8em 0 0em fade(@loader-color, 20%);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
1.8em -1.8em 0 0em fade(@loader-color, 20%),
2.5em 0em 0 0em fade(@loader-color, 20%),
1.75em 1.75em 0 0em fade(@loader-color, 50%),
0em 2.5em 0 0em fade(@loader-color, 70%),
-1.8em 1.8em 0 0em @loader-color,
-2.6em 0em 0 0em fade(@loader-color, 20%),
-1.8em -1.8em 0 0em fade(@loader-color, 20%);
}
75% {
box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
1.8em -1.8em 0 0em fade(@loader-color, 20%),
2.5em 0em 0 0em fade(@loader-color, 20%),
1.75em 1.75em 0 0em fade(@loader-color, 20%),
0em 2.5em 0 0em fade(@loader-color, 50%),
-1.8em 1.8em 0 0em fade(@loader-color, 70%),
-2.6em 0em 0 0em @loader-color,
-1.8em -1.8em 0 0em fade(@loader-color, 20%);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em fade(@loader-color, 20%),
1.8em -1.8em 0 0em fade(@loader-color, 20%),
2.5em 0em 0 0em fade(@loader-color, 20%),
1.75em 1.75em 0 0em fade(@loader-color, 20%),
0em 2.5em 0 0em fade(@loader-color, 20%),
-1.8em 1.8em 0 0em fade(@loader-color, 50%),
-2.6em 0em 0 0em fade(@loader-color, 70%),
-1.8em -1.8em 0 0em @loader-color;
}
}
}

.loaderAnimation("black", #222);
.loaderAnimation("white", #f9f9f9);

.atm-loader-small {
font-size: 8px;
}
Expand Down
18 changes: 13 additions & 5 deletions src/loader/Loader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default class Loader extends React.PureComponent {
return {
mode: PropTypes.string, //possible values: [small, big]
layout: PropTypes.string, //possible values: [center]
color: PropTypes.oneOf(['black', 'white']),
className: PropTypes.string,
'data-e2e': PropTypes.string
};
Expand All @@ -28,26 +29,33 @@ export default class Loader extends React.PureComponent {
return {
mode: '',
layout: '',
color: 'black',
className: '',
'data-e2e': null
};
}

render() {
let helper = this.context.$Utils.$UIComponentHelper;
const helper = this.context.$Utils.$UIComponentHelper;
const { className, mode, layout, color = 'black' } = this.props;

return (
<div
className={helper.cssClasses(
{
'atm-loader': true,
['atm-loader-' + this.props.mode]: this.props.mode,
['atm-loader-' + this.props.layout]: this.props.layout
['atm-loader-' + mode]: mode,
['atm-loader-' + layout]: layout
},
this.props.className
className
)}
{...helper.getDataProps(this.props)}>
<div className={helper.cssClasses('atm-loader-animation')} />
<div
className={helper.cssClasses({
'atm-loader-animation': true,
['atm-loader-animation-' + color]: color
})}
/>
</div>
);
}
Expand Down

0 comments on commit e8c51f2

Please sign in to comment.