blob: a02f41d17b60c5abd37c78bcf43384dba2b2d83d (
plain) (
blame)
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
72
73
74
|
// Name: Spinner
// Description: Component to create a loading spinner
//
// Component: `uk-spinner`
//
// ========================================================================
// Variables
// ========================================================================
$spinner-size: 30px !default;
$spinner-stroke-width: 1 !default;
$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default; // Minus stroke width to prevent overflow clipping
$spinner-circumference: round(2 * 3.141 * $spinner-radius) !default;
$spinner-duration: 1.4s !default;
/* ========================================================================
Component: Spinner
========================================================================== */
/*
* Adopts `uk-icon`
*/
.uk-spinner {
@if(mixin-exists(hook-spinner)) {@include hook-spinner();}
}
/* SVG
========================================================================== */
.uk-spinner > * { animation: uk-spinner-rotate $spinner-duration linear infinite; }
@keyframes uk-spinner-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
/*
* Circle
*/
.uk-spinner > * > * {
stroke-dasharray: $spinner-circumference;
stroke-dashoffset: 0;
transform-origin: center;
animation: uk-spinner-dash $spinner-duration ease-in-out infinite;
stroke-width: $spinner-stroke-width;
stroke-linecap: round;
}
@keyframes uk-spinner-dash {
0% { stroke-dashoffset: $spinner-circumference; }
50% {
stroke-dashoffset: $spinner-circumference/4;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: $spinner-circumference;
transform:rotate(450deg);
}
}
// Hooks
// ========================================================================
@if(mixin-exists(hook-spinner-misc)) {@include hook-spinner-misc();}
// @mixin hook-spinner(){}
// @mixin hook-spinner-misc(){}
|
