Skip to content

Commit 79374c0

Browse files
committed
starting animations
1 parent 2c6fc5c commit 79374c0

File tree

4 files changed

+155
-19
lines changed

4 files changed

+155
-19
lines changed

animation.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Ionicons Animations</title>
5+
<style>
6+
* {
7+
-moz-box-sizing: border-box;
8+
-webkit-box-sizing: border-box;
9+
box-sizing: border-box;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
body {
15+
background: #fff;
16+
color: #444;
17+
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
18+
}
19+
20+
a, a:visited {
21+
color: #888;
22+
text-decoration: underline;
23+
}
24+
a:hover, a:focus { color: #000; }
25+
p { margin-bottom: 20px; }
26+
27+
header {
28+
border-bottom: 2px solid #ddd;
29+
margin-bottom: 20px;
30+
overflow: hidden;
31+
padding: 20px 0;
32+
}
33+
34+
header h1 {
35+
color: #888;
36+
float: left;
37+
font-size: 36px;
38+
font-weight: 300;
39+
}
40+
41+
header a {
42+
float: right;
43+
font-size: 14px;
44+
}
45+
46+
.container {
47+
margin: 0 auto;
48+
max-width: 1200px;
49+
min-width: 960px;
50+
padding: 0 20px;
51+
width: 95%;
52+
}
53+
54+
.icon {
55+
font-size: 32px;
56+
}
57+
</style>
58+
<link href="css/ionicons.css" rel="stylesheet" type="text/css" media="screen" />
59+
</head>
60+
61+
<body>
62+
<div class="container">
63+
<header>
64+
<h1>Ionicons Animations:</h1>
65+
<p><a href="http://ionicons.com/">Ionicons Homepage</a></p>
66+
</header>
67+
<div class="content">
68+
69+
<h3>.ion-refreshing</h3>
70+
<p>
71+
<i class="icon ion-refreshing"></i>
72+
</p>
73+
74+
<h3>.ion-loading-a</h3>
75+
<p>
76+
<i class="icon ion-loading-a"></i>
77+
</p>
78+
79+
<h3>.ion-loading-b</h3>
80+
<p>
81+
<i class="icon ion-loading-b"></i>
82+
</p>
83+
84+
<h3>.ion-loading-c</h3>
85+
<p>
86+
<i class="icon ion-loading-c"></i>
87+
</p>
88+
89+
<h3>.ion-loading-d</h3>
90+
<p>
91+
<i class="icon ion-loading-d"></i>
92+
</p>
93+
94+
</div>
95+
</div>
96+
</body>
97+
</html>

css/ionicons.css

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*!
1+
/*
22
Ionicons, v1.3.0
33
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
44
https://twitter.com/helloimben https://twitter.com/ionicframework
@@ -11,7 +11,11 @@
1111
font-weight: normal;
1212
font-style: normal; }
1313

14-
.ion, .ionicons,
14+
.ion, .ion-loading-a,
15+
.ion-loading-b,
16+
.ion-loading-c,
17+
.ion-loading-d,
18+
.ion-refreshing, .ionicons,
1519
.ion-alert,
1620
.ion-alert-circled,
1721
.ion-archive,
@@ -455,6 +459,7 @@
455459
.ion-wineglass,
456460
.ion-woman,
457461
.ion-wrench {
462+
display: inline-block;
458463
font-family: "Ionicons";
459464
speak: none;
460465
font-style: normal;
@@ -465,11 +470,15 @@
465470
-webkit-font-smoothing: antialiased;
466471
-moz-osx-font-smoothing: grayscale; }
467472

468-
.ion-spin {
469-
-webkit-animation: spin 2s infinite linear;
470-
-moz-animation: spin 2s infinite linear;
471-
-o-animation: spin 2s infinite linear;
472-
animation: spin 2s infinite linear; }
473+
.ion-spin, .ion-loading-a,
474+
.ion-loading-b,
475+
.ion-loading-c,
476+
.ion-loading-d,
477+
.ion-refreshing {
478+
-webkit-animation: spin 0.8s infinite linear;
479+
-moz-animation: spin 0.8s infinite linear;
480+
-o-animation: spin 0.8s infinite linear;
481+
animation: spin 0.8s infinite linear; }
473482

474483
@-moz-keyframes spin {
475484
0% {
@@ -1451,16 +1460,16 @@
14511460
.ion-link:before {
14521461
content: "\f1fe"; }
14531462

1454-
.ion-load-a:before {
1463+
.ion-load-a:before, .ion-loading-a:before {
14551464
content: "\f29a"; }
14561465

1457-
.ion-load-b:before {
1466+
.ion-load-b:before, .ion-loading-b:before {
14581467
content: "\f29b"; }
14591468

1460-
.ion-load-c:before {
1469+
.ion-load-c:before, .ion-loading-c:before {
14611470
content: "\f29c"; }
14621471

1463-
.ion-load-d:before {
1472+
.ion-load-d:before, .ion-loading-d:before {
14641473
content: "\f29d"; }
14651474

14661475
.ion-location:before {
@@ -1595,7 +1604,7 @@
15951604
.ion-record:before {
15961605
content: "\f21b"; }
15971606

1598-
.ion-refresh:before {
1607+
.ion-refresh:before, .ion-refreshing:before {
15991608
content: "\f21c"; }
16001609

16011610
.ion-reply:before {

0 commit comments

Comments
 (0)