我需要显示进度条,直到从我的网站上传和显示图像。为此,我选择了进度条from here。
我在scripts.js
文件中使用了以下代码:
div = $('<div class="loader-fb"/>');
div.appendTo('.selected_album_inner');
&#13;
.loader-fb {
top: calc(50% - 5px);
left: calc(50% - 5px);
position: absolute !important;
}
/* Demo specific styles end */
/* Loader with three blocks */
.loader-fb, .loader-fb:before, .loader-fb:after {
position: relative;
display: inline-block;
width: 20px;
height: 50px;
background-color: rgba(215,230,240,0.9);
border: 1px solid rgb(215,230,240);
z-index: 100000;
content: ' ';
margin-left: -5px;
margin-right: -9px;
}
.loader-fb:before {
top: -11px;
left: -100%;
animation: loading-fb .8s cubic-bezier(.4,.5,.6,1) infinite;
}
.loader-fb {
animation: loading-fb-main .8s cubic-bezier(.4,.5,.6,1) .2s infinite;
}
.loader-fb:after {
top: -11px;
right: -100%;
margin-top: 50%;
animation: loading-fb .8s cubic-bezier(.4,.5,.6,1) .4s infinite;
}
@keyframes loading-fb {
from {
transform: scaleY(1.4);
background-color: rgba(55,114,171,0.9);
border: 1px solid rgb(55,114,171);
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selected_album_inner">
&#13;
进度条仅显示在mozilla firefox中,但不显示在chrome中。有什么想法吗?