微信号:gh_15d32a71b93c

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

10个免费创建动画加载器的CSS&JavaScript代码片段

2017-04-11 08:17 web前端程序员

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

   自定义加载栏使用强大的视觉效果为网站提供更新访客的方式。有时静态的“loading”消息是不够的!

   如果你想在自己的网站上添加一个自定义加载栏,那么这个专题中有些肯定能满足你的需求。

  1. 带计数的加载栏

    HTML

  1. CSS

JS

 

     result

   Nicolas Slatiner创建了这个令人难以置信的加载栏,其顶部选项卡显示了正在加载百分比。它可以与使用JavaScript更改的自定义动画一起移动。

   但最棒的部分是动画栏的设计和干净的风格。这个加载栏适合任何网站,而且提供令人难以置信的用户体验。

2.光线加载器

   HTML

   

   CSS

   

   

   

   

   

result

   如果你喜欢更简单的旋转加载器,那么这个光线加载器可能就是你正在寻找的。它使用星爆形状与纯CSS3动画相结合,创造出吸引眼球的加载效果。

   你可以在非常整洁的CSS中调整动画风格和加载时间。而且这些形状也都是使用CSS创建的,所以你可以调整星爆图标的大小,速度和结构。

3.多重动画加载器

   Haml

   SCSS

   Js

result

   也许我见过的最复杂的加载功能就是Glen Cheney创建的这个圆。它使用几行JavaScript来添加显示/隐藏功能,但这不是圆形动画工作所必需的。

   所以,你可以使用纯CSS3在你的网站上运行这个东西,可以改变颜色,大小和速度。 这个动画中我最喜欢的是中心向外旋转的不规则形状。

   它提供了一个吸引眼球的非常酷的效果。

4.画布分形加载器

   CSS

   CoffeeScript

Result

   这个条纹分形画布加载图标感觉就像一个老派Windows屏幕保护程序。 这种技术使用了大量的JavaScript来实现循环效果并保持颜色转换一致。

   虽然它被称为画布元素,但是它并没有在页面上使用画布元素。相反,它是由一个自然的画布库Sketch.js驱动。如果你喜欢分形风格,而且不介意使用JavaScript让它在你的网站上运行,那么将会是个非常棒的设计。

5.OuroboroCSS加载器

   HTML

  CSS

result

   OuroboroCSS加载器是开发者Geoffrey Crofte的独特创作。这些加载器由纯CSS驱动,并且它们以重复的动画循环运行,展现出形状消失的错觉。

6.温度计加载器

   HTML

  

   SCSS

result

  这种自定义的温度计式加载器感觉更像是一个惊人的进步证明,而不是网站的实用元素。但是创作者Hugo Giraudel真的推动了CSS的极限,因为这个加载器从底部移动到顶部的过程中有许多不同的颜色。

   它只有三个相互嵌套在一起HTML元素,颜色和动画都是纯CSS,它们是分离的。

7.Three.js加载器

   CSS

 

   JS

   

 

   

 

   

 

   我必须把它收进这个专题,因为它很酷。 Lennart Hase的Three.js加载器使用免费的Three.js 3D库在小表面上创建旋转的立方体。

   动画通过JavaScript和WebGL渲染进行控制。目前3D设计在网络上更加突出,这些代码片段证明了你可以实现多少。

8.有机圆

   HTML

  

   CSS

 

   JS

result

   这个奇怪的画布圆形加载器让我想起了空中交通雷达或在潜艇上见到的各种类型的物体光点。它完全使用ctx和JavaScript在HTML canvas元素上从头开始创建这种效果。

   你可能找不到一个好的方法来在你的网站上实现,但你不得不承认这件事令人印象深刻。

9.简单圆形旋转器

   HTML

   CSS

   JS

result

   简短,甜美,最重要的是最好地描述这个画布加载器。它使用一些基本JavaScript控制动画,让画布元素的内圆无限旋转。

10.纯CSS加载点

   HTML

   CSS

  result

   另一个简单而有趣的例子是这个纯CSS加载器,点交替进入和移出视图。它是最酷的加载效果之一,真正达到了效果却不太引人注意。

   你可以将其放在任何页面上,而且它的设置很简单。点形状和动画通过CSS运行,并不需要JavaScript。

结束

   如果你正在为你的网站寻找一个自定义加载器,那么我保证你会在这里找到一些东西。 这些加载器非常多样化,但它们都可以适用于不同的项目。

   再看看这个专题,看看你可以找到什么,并随意自定义这些片段供你自己使用。

   接下来,你可以查看这些代码片段,比如创建漂亮的CSS按钮的代码片段或复制和粘贴响应式导航片段集合。


英文原文:https://1stwebdesigner.com/10-free-css-javascript-snippets-for-creating-animated-loaders/
译者:moocou


 
web前端程序员 更多文章 使用CSS网格布局放置元素的7种方法 关于Javascript的一些细微优化 RxJS的动画介绍(上) 50个AJAX面试问答 如何在Reactjs中进行简单的表单验证
猜您喜欢 nginx介绍(三) 配置篇 低效程序员的7个坏习惯 千人千面智能淘宝店铺背后的算法研究登陆人工智能顶级会议AAAI 2017 LR实战-测试终端安全产品 做个耐撕的人