Skype风格的Loading代码,Css代码库,德仔网

代码语言

代码分类

【Css】 Skype风格的Loading

作者:liangbo / 发布于2014/12/19/ 687


	body {
	 background: skyblue;
	}
	
	@keyframes rotate {
	 from {
	 transform: rotate(0);
	 }
	 to {
	 transform: rotate(360deg);
	 }
	}
	
	@keyframes scale {
	 from {
	 transform: scale(1);
	 }
	 25% {
	 transform: scale(.35);
	 }
	 to {
	 transform: scale(1);
	 }
	}
	
	$width: 80px;
	
	.loading {
	 width: $width;
	 height: $width;
	 position: relative;
	 margin: 50px auto;
	
	 div {
	 width: 0;
	 height: 0;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
	 margin: 0 auto;
	 position: relative;
	
	 transform-origin: center ($width / 2);
	 animation: rotate 2s infinite;
	
	 @for $idx from 1 through 8 {
	 &:nth-child(#{$idx}), &:nth-child(#{$idx})::after {
	 animation-delay: $idx * .09s + 1s;
	 }
	 }
	
	 &::after {
	 content: "";
	 display: block;
	 position: absolute;
	 left: -$width / 8;
	 right: -$width / 8;
	 top: -$width / 8;
	 bottom: -$width / 8;
	 background: white;
	 border-radius: 50%;
	 box-shadow: rgba(255, 255, 255, .5) 0 0 2px;
	
	 animation: scale 2s infinite ease-in-out;
	 }
	 }
	
	 span {
	 position: absolute;
	 bottom: -$width / 2;
	 left: 0;
	 right: 0;
	 text-align: center;
	 color: white;
	 font-family: sans-serif;
	 }
	}

	

	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	 <meta charset="utf-8" />
	 <title></title>
	
	 <link href="loading.css" rel="stylesheet" />
	</head>
	<body>
	 <div class="loading">
	 <div class="circle"></div>
	 <div class="circle"></div>
	 <div class="circle"></div>
	 <div class="circle"></div>
	 <div class="circle"></div>
	 <div class="circle"></div>
	 <div class="circle"></div>
	 <div class="circle"></div>
	
	 <span>Loading...</span>
	 </div>
	</body>
	</html>

试试其它关键字

　Loading　　Skype　

同语言下

可能有用的

liangbo贡献的其它代码(4)