.bar { width: 100%; height: 20px; border: 1px solid #2980b9; border-radius: 3px; background-image: repeating-linear-gradient( -45deg, #2980b9, #2980b9 11px, #eee 10px, #eee 20px /* determines size */ ); background-size: 28px 28px; animation: move .5s linear infinite; } ...
// Start the progress bar animationNProgress.start(); page++; } ); loadMore.click(); } ); // Create a new jQuery plugin,which takes two arguments:// src - the URL of an image// deferred - a jQuery deferred object,created by the previously shown photo$.fn.showImage = function(src...
.bar{width:100%;height:20px;border:1pxsolid#2980b9;border-radius:3px;background-image:repeating-linear-gradient(-45deg,#2980b9,#2980b9 11px,#eee 10px,#eee 20px /* determines size */);background-size:28px28px;animation:move.5slinear infinite;}@keyframesmove{0%{background-position:00;}...
… //为缩减篇幅省略中间代码.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; } 因为是12个圆点,每个圆点的闪烁间隔时间0.1s,因此第1个圆点没有animation-delay延时,立即闪烁。第二个圆点,从-1.1s开始闪烁(负数不理解的话,参考animation一文,意思是从该时间点开始启动,之前的动画效果不显示)...
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以,但是加载时间比较长。CSS的animation可以做出大多数的loading,比如: ...
}.loadingImage::after{position: absolute;width:50px;height:50px;border-top:10pxsolid#b160d1;border-bottom:10pxsolid#b160d1;border-left:10pxsolid transparent;border-right:10pxsolid transparent;border-radius:50px;content:'';top: -20px;left: -20px;animation: loadingImage_after1.5sinfinite line...
因为是12个圆点,每个圆点的闪烁间隔时间0.1s,因此第1个圆点没有animation-delay延时,立即闪烁。第二个圆点,从-1.1s开始闪烁(负数不理解的话,参考animation一文,意思是从该时间点开始启动,之前的动画效果不显示)。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果 ...
nth-child(2) { animation: load 2.5s 1.2s infinite linear; }.loader span:nth-child(3) { animation: load 2.5s 1s infinite linear; }.loader span:nth-child(4) { animation: load 2.5s 0.8s infinite linear; }.loader span:nth-child(5) { animation: load 2.5s 0.6s infinite linear; ...
(360deg);}}p#spinner{height:30px;width:30px;overflow:hidden;background:#000;-webkit-mask-image:url("data:image/png[...]");-webkit-mask-size:30px 30px;-webkit-animation-name:rotate;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:...
Image Source Here’s an exampleof a skeleton screen loading animation that holds users’ attention until all visible page content is loaded. 15. Advanced Spinner Loading Animations Since spinners are such a common type of infinite-load...