标签归档:Loading动画

又来一波 15个超炫酷的CSS3加载Loading动画图标

之前我们分享过好几波炫酷实用的CSS3Loading加载动画图标,外观设计和动画效果都非常具有创意。比如纯CSS3 Loading加载动画 多组超炫酷风格10款造型奇特的CSS3进度条/Loading动画。今天我们又要向大家分享一组炫酷的CSS3加载Loading动画图标,它们共同的特点就是都很个性化。

15-css3-loading-icon

在线演示源码下载

纯CSS3 Loading加载动画 多组超炫酷风格

之前我们为大家分享过很多款炫酷和实用的CSS3 Loading加载动画,比如这款CSS3实现的火柴燃烧Loading加载动画5个可爱的CSS3 Loading加载动画。今天要分享的同样是一款基于纯CSS3的Loading加载动画,与其他Loading动画不同的是,它有很多种动画风格,你可以根据自己的喜好和实际项目选择一款加以应用。

css3-loading-cool-styles

在线演示源码下载

超炫酷的CSS3 Loading加载动画

之前我们已经分享过很多基于jQuery和CSS3的Loading加载动画,比如最近刚分享的CSS3齿轮Loading加载动画,效果很不错。也有以前分享的5个可爱的CSS3 Loading加载动画。今天要分享的是非常炫酷的CSS3 Loading加载动画,可以自定义文字,也有很多种不同的外观样式。

css3-custom-loading

在线演示源码下载

HTML5/CSS3五彩旋转Loading加载动画

今天我们要来分享一款很有特点的HTML5/CSS3环形旋转Loading加载动画,跟之前分享的这款HTML5 Loading动画加载 五彩的圆环Loading类似,它也是一个圆环,不同的是,这款HTML5 Loading加载动画的背景颜色会不断地发生变化,出现五彩斑斓的视觉效果。

html5-css3-color-loading

在线演示源码下载

5个可爱的CSS3 Loading加载动画

之前我们分享过很多漂亮的CSS3 Loading加载动画,印象最深的要算这款CSS3 Loading进度条加载动画特效 3款绚丽风格。这次要给大家介绍的是另外一款可爱的CSS3 Loading动画,一共有5种动画类型,每组Loading动画都非常有创意。

5-pretty-css3-loading

接下来我们一起来看看实现这几款Loading动画的CSS3代码。

HTML代码如下:

<div class='loader loader--audioWave'></div>
<div class='loader loader--snake'></div>
<div class='loader loader--spinningDisc'></div>
<div class='loader loader--glisteningWindow'></div>
<div class='loader loader--circularSquare'></div>

第一个波浪形的Loading动画CSS[......]

阅读全文>>

HTML5 Loading动画加载 五彩的圆环Loading

今天我们要分享一款基于HTML5的Loading加载动画特效,这款HTML5加载动画是一个五彩的圆环,圆环不停地转动从而体现加载正在进行。如果你感兴趣,可以查看这款HTML5 Loading动画的在线演示,效果还不错。

css3-circle-loading

下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码。

首先是HTML代码,只定义一个Loading容器,非常简单。

<div id=”hold”></div>

接下来是CSS代码,主要是定义每一个圆圈的动画效果:

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

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

@keyframes spin {
  from[......]

阅读全文>>

纯CSS3创意Loading加载动画

今天要来分享一款非常具有创意的CSS3 Loading动画效果,整个Loading动画就像一部开足马力的发动机,在不停地循环工作,看上去Loading动画样式十分新颖。之前我们也分享过一些创意型的Loading动画,比如:HTML5 Canvas发光Loading动画

css3-robot-loading-animation

在线演示源码下载

jQuery自定义Loading动画插件spin.js

spin.js是一款基于jQuery的Loading动画插件,和之前分享的CSS3 Loading动画应用不同的是,这款Loading动画是基于jQuery的,意味着兼容性更好;还有就是这款Loading动画是可以自定义参数的,比如半径、旋转速度等都可以通过右侧的滑杆来设置。

jquery-loading-spin-js

在线演示源码下载

HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。

html5-canvas-shine-loading

在线演示源码下载

CSS3 3D立方体Loading加载动画特效

之前我们分享过一些HTML5和CSS3的3D立方体特效,他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的,9个小立方体上下浮动,呈现波浪的效果,并且,这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

css3-3d-cube-loading

在线演示源码下载