mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance styles of preloader

Browse Source
This commit is contained in:
igoradamenko
2018-05-18 18:02:08 +03:00
parent b4d35283ae
commit 359ee35bfc
5 changed files with 69 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/components/preloader/__bounce/preloader__bounce.scss
-35
View File
@@ -1,35 +0,0 @@
.preloader__bounce {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 3px;
background-color: #333;
border-radius: 100%;
animation: preloaderBounce 1.4s infinite ease-in-out both;
&:first-child {
animation-delay: -.32s;
}
&:nth-child(2) {
animation-delay: -.16s;
}
&:last-child {
margin-right: 0;
}
@keyframes preloaderBounce {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
80%, 100% {
transform: scale(0);
}
}
}
web/app/components/preloader/index.js
+1 -3
View File
@@ -1,5 +1,3 @@
export { default } from './preloader'; export { default } from './preloader';
require('./preloader.scss'); // all styles were moved to iframe.html
require('./__bounce/preloader__bounce.scss');
web/app/components/preloader/preloader.scss
-5
View File
@@ -1,5 +0,0 @@
.preloader {
width: 60px;
text-align: center;
font-size: 0;
}
web/app/components/root/root.jsx
+3 -1
View File
@@ -51,10 +51,12 @@ export default class Root extends Component {
componentDidMount() { componentDidMount() {
const { sort } = this.state; const { sort } = this.state;
api.getConfig().then(config => { api.getConfig().then(config => {
store.set('config', config); store.set('config', config);
this.setState({ config }); this.setState({ config });
}); });
Promise.all([ Promise.all([
api.getUser() api.getUser()
.then(data => store.set('user', data)) .then(data => store.set('user', data))
@@ -69,7 +71,7 @@ export default class Root extends Component {
}); });
setTimeout(this.checkUrlHash); setTimeout(this.checkUrlHash);
}) });
} }
checkUrlHash() { checkUrlHash() {
web/iframe.html
+36 -16
View File
@@ -13,16 +13,18 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.iframe_preloader {
position: absolute; .preloader {
left: 0;
right: 0;
margin: 0 auto;
width: 60px; width: 60px;
text-align: center; text-align: center;
font-size: 0; font-size: 0;
} }
.iframe_preloader__bounce {
.preloader_view_iframe {
margin: 0 auto;
}
.preloader__bounce {
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
@@ -31,22 +33,40 @@
border-radius: 100%; border-radius: 100%;
animation: iframePreloaderBounce 1.4s infinite ease-in-out both; animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
} }
.iframe_preloader__bounce:first-child {animation-delay: -.32s;}
.iframe_preloader__bounce:nth-child(2) {animation-delay: -.16s;} .preloader__bounce:first-child {
.iframe_preloader__bounce:last-child {margin-right: 0;} animation-delay: -.32s;
}
.preloader__bounce:nth-child(2) {
animation-delay: -.16s;
}
.preloader__bounce:last-child {
margin-right: 0;
}
@keyframes iframePreloaderBounce { @keyframes iframePreloaderBounce {
0% {transform: scale(0);} 0% {
40% {transform: scale(1);} transform: scale(0);
80%, 100% {transform: scale(0);} }
40% {
transform: scale(1);
}
80%, 100% {
transform: scale(0);
}
} }
</style> </style>
</head> </head>
<body> <body>
<div id="remark42"> <div id="remark42">
<div class="iframe_preloader"> <div class="preloader preloader_view_iframe">
<div class="iframe_preloader__bounce"></div> <div class="preloader__bounce"></div>
<div class="iframe_preloader__bounce"></div> <div class="preloader__bounce"></div>
<div class="iframe_preloader__bounce"></div> <div class="preloader__bounce"></div>
</div> </div>
</div> </div>
<script> <script>