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/iframe.html
+48 -28
View File
@@ -13,41 +13,61 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iframe_preloader {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 60px;
text-align: center;
font-size: 0;
.preloader {
width: 60px;
text-align: center;
font-size: 0;
}
.iframe_preloader__bounce {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 3px;
background-color: #333;
border-radius: 100%;
animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
.preloader_view_iframe {
margin: 0 auto;
}
.iframe_preloader__bounce:first-child {animation-delay: -.32s;}
.iframe_preloader__bounce:nth-child(2) {animation-delay: -.16s;}
.iframe_preloader__bounce:last-child {margin-right: 0;}
@keyframes iframePreloaderBounce {
0% {transform: scale(0);}
40% {transform: scale(1);}
80%, 100% {transform: scale(0);}
.preloader__bounce {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 3px;
background-color: #333;
border-radius: 100%;
animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
}
.preloader__bounce:first-child {
animation-delay: -.32s;
}
.preloader__bounce:nth-child(2) {
animation-delay: -.16s;
}
.preloader__bounce:last-child {
margin-right: 0;
}
@keyframes iframePreloaderBounce {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
80%, 100% {
transform: scale(0);
}
}
</style>
</head>
<body>
<div id="remark42">
<div class="iframe_preloader">
<div class="iframe_preloader__bounce"></div>
<div class="iframe_preloader__bounce"></div>
<div class="iframe_preloader__bounce"></div>
</div>
<div class="preloader preloader_view_iframe">
<div class="preloader__bounce"></div>
<div class="preloader__bounce"></div>
<div class="preloader__bounce"></div>
</div>
</div>
<script>
var lastHeight = 0;