欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

9种纯css3 loading圈加载动画效果下载

程序员文章站 2022-03-01 14:26:56
...

本Demo是一个loading页面加载的一个功能、图标都是通过css3代码来实现的、Demo里面一共包含9款不同loading效果、Demo引入了bootstrap.min.css和一个自定义的9种加载动画、相比我以前分享的css3加载动画特效选择性要多些、可以根据项目的需要选择不同的loading加载动画效果、效果图如下

9种纯css3 loading圈加载动画效果下载


以loader4为例HTML代码如下

<div class="col-md-6 text-center">
	<p>loader 4</p>
	<div class="loader4"></div>
</div>


CSS3代码如下

.loader4 {
   width:45px;
   height:45px;
   display:inline-block;
   padding:0px;
   border-radius:100%;
   border:5px solid;
   border-top-color:rgba(246, 36, 89, 1);
   border-bottom-color:rgba(0,0,0, 0.1);
   border-left-color:rgba(246, 36, 89, 1);
   border-right-color:rgba(0,0,0, 0.1);
   -webkit-animation: loader4 1s ease-in-out infinite;
   animation: loader4 1s ease-in-out infinite;
}
@keyframes loader4 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes loader4 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}


源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1ntA7Om9 密码: 3ay8