html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果

在网上找资料的时候，看到网上有图片加载进度的效果，手痒就自己也写了一个。

图片加载完后，隐藏loading效果。

想看加载效果，请ctrel+F5强制刷新或者清理缓存。

效果预览：

0%

代码如下：

HTML5+javascript实现图片加载进度动画效果

.loading {width:200px;height:200px;position:relative;margin:50px auto;border:1px solid #f90;border-radius:%;}

.dot {width:%;;height:%;animation:rond .8s infinite;-webkit-animation:rond .8s infinite;}

.dot:after {width:10px;height:10px;position:absolute;top:-5px;left:90px;content:"";display:table;background-color:#f50;border-radius:%;}

.num {width:%;height:%;position:absolute;top:;left:;line-height:200px;text-align:center;font-size:20px;color:#f60;}

@keyframes rond {

% {transform:rotate(0deg);}

% {transform:rotate(360deg);}

}

@-webkit-keyframes rond {

% {-webkit-transform:rotate(0deg);}

% {-webkit-transform:rotate(360deg);}

}

.photo {width:860px;margin: auto;displa