Skip to content

Commit b37e62e

Browse files
author
hzliujunwei
committed
add style
1 parent 0b2ab4d commit b37e62e

File tree

4 files changed

+452
-0
lines changed

4 files changed

+452
-0
lines changed

‎css/loading.styl

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
loading-size = 60px
2+
loading-border-width = 3px
3+
loading-border-color = rebeccapurple
4+
5+
$left-right
6+
width: 50%
7+
height: 100%
8+
display: inline-block
9+
overflow: hidden
10+
position: relative
11+
border-color: inherit
12+
13+
$left-right-inner
14+
width: 200%
15+
position: absolute
16+
top: 0
17+
right: 0
18+
bottom: 0
19+
box-sizing: border-box
20+
border-radius: 50%
21+
border: loading-border-width solid;
22+
border-color: inherit;
23+
24+
.loading
25+
width: loading-size
26+
height: loading-size
27+
font-size: 0
28+
border-color: loading-border-color
29+
&-inner
30+
width: 100%
31+
height: 100%
32+
border-color: inherit
33+
animation: loading-inner-rotate 1568ms linear infinite
34+
&-item
35+
width: 100%
36+
height: 100%
37+
position: relative
38+
border-color: inherit
39+
animation: loading-item-rotate 5332ms cubic-bezier(0.56, 0.08, 0.1, 0.93) infinite both;
40+
&-left
41+
@extend $left-right
42+
&-inner
43+
@extend $left-right-inner
44+
border-right-color: transparent
45+
border-bottom-color: transparent
46+
left: 0
47+
animation: loading-left-inner-rotate 1333ms cubic-bezier(0.56, 0.08, 0.1, 0.93) infinite both
48+
transform: rotate(130deg)
49+
50+
&-right
51+
@extend $left-right
52+
&-inner
53+
@extend $left-right-inner
54+
border-left-color: transparent
55+
border-bottom-color: transparent
56+
left: -100%
57+
animation: loading-right-inner-rotate 1333ms cubic-bezier(0.56, 0.08, 0.1, 0.93) infinite both
58+
transform: rotate(-130deg)
59+
60+
61+
62+
@keyframes loading-inner-rotate {
63+
to{
64+
transform: rotate(360deg)
65+
}
66+
}
67+
68+
@keyframes loading-item-rotate {
69+
12.5% {
70+
transform: rotate(135deg)
71+
}
72+
73+
25%{
74+
transform: rotate(270deg)
75+
}
76+
77+
37.5%{
78+
transform: rotate(405deg)
79+
}
80+
81+
50%{
82+
transform: rotate(540deg)
83+
}
84+
85+
62.5%{
86+
transform: rotate(675deg)
87+
}
88+
89+
75%{
90+
transform: rotate(810deg)
91+
}
92+
93+
87.5%{
94+
transform: rotate(945deg)
95+
}
96+
97+
100%{
98+
transform: rotate(1080deg)
99+
}
100+
}
101+
102+
@keyframes loading-left-inner-rotate {
103+
0% {
104+
transform: rotate(0deg)
105+
}
106+
107+
50% {
108+
transform: rotate(133deg)
109+
}
110+
111+
100% {
112+
transform: rotate(0deg)
113+
}
114+
}
115+
116+
@keyframes loading-right-inner-rotate {
117+
0% {
118+
transform: rotate(0deg)
119+
}
120+
121+
50% {
122+
transform: rotate(-133deg)
123+
}
124+
125+
100% {
126+
transform: rotate(0deg)
127+
}
128+
129+
130+
}
131+

‎loading5.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<link rel="stylesheet" href="res/loading.css">
7+
<style>
8+
body{
9+
padding: 100px;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
15+
<div class="wrapper">
16+
<div class="loading">
17+
<div class="loading-inner">
18+
<div class="loading-item">
19+
<div class="loading-item-left">
20+
<div class="loading-item-left-inner"></div>
21+
</div>
22+
<div class="loading-item-right">
23+
<div class="loading-item-right-inner"></div>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
30+
</body>
31+
</html>

‎package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "loading",
3+
"version": "1.0.0",
4+
"description": "android loading by css",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/JJVvV/loading.git"
12+
},
13+
"keywords": [
14+
"loading",
15+
"css",
16+
"animation"
17+
],
18+
"author": "Alex Liu",
19+
"license": "ISC",
20+
"bugs": {
21+
"url": "https://github.com/JJVvV/loading/issues"
22+
},
23+
"homepage": "https://github.com/JJVvV/loading#readme"
24+
}

0 commit comments

Comments
 (0)