blob: 8921aec80059cbec580c9dfee55b7f4594c9811a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
// Spinners
//
// Spinners are pretty simple. You can change the color by changing `$spinner-color`.
// Also, any of the modifiers below can also carry `.wy-spinner-absolute` to position
// the spinner in the absolute center of your wrapping area.
//
// Markup:
// <div class="wy-spinner {$modifiers}"></div>
// <a href="#random" class="btn"><span class="wy-spinner {$modifiers}"></span> Loading</a>
//
// .wy-spinner-large - Large spinner.
// .wy-spinner-small - Small spinner.
//
// Styleguide 7.0
.wy-spinner
height: 30px
width: 30px
margin: 0 auto
position: relative
+animation(rotation .6s infinite linear)
border: 8px solid lighten($spinner-color, 50%)
border-top: 8px solid $spinner-color
border-radius: 100%
display: block
.wy-spinner.wy-spinner-margin
margin: $base-line-height auto
.btn .wy-spinner
display: inline-block
height: 14px
width: 14px
border-width: 4px
border-color: rgba(0,0,0,.1)
border-top-color: $white
top: 1px
.wy-logo .wy-spinner
border-color: rgba(0,0,0,.1)
border-top-color: $section-background-color
margin-bottom: $gutter / 2
.wy-spinner.wy-spinner-inline
display: inline-block
vertical-align: middle
margin: none
.wy-spinner.wy-spinner-large
height: 45px
width: 45px
border-width: 12px
.wy-spinner.wy-spinner-small
height: 16px
width: 16px
border-width: 4px
.wy-spinner.wy-spinner-absolute
position: absolute
top: 0
left: 0
right: 0
bottom: 0
margin: auto
+keyframes(rotation)
from
+transform(rotate(0deg))
to
+transform(rotate(359deg))
|
