]>
Commit | Line | Data |
---|---|---|
1d5342ab C |
1 | svg { |
2 | width: 100px; | |
3 | display: block; | |
4 | margin: 40px auto 0; | |
5 | } | |
6 | ||
7 | .path { | |
8 | stroke-dasharray: 1000; | |
9 | stroke-dashoffset: 0; | |
10 | ||
11 | &.circle { | |
12 | -webkit-animation: dash .9s ease-in-out; | |
13 | animation: dash .9s ease-in-out; | |
14 | } | |
15 | ||
16 | &.line { | |
17 | stroke-dashoffset: 1000; | |
18 | -webkit-animation: dash .9s .35s ease-in-out forwards; | |
19 | animation: dash .9s .35s ease-in-out forwards; | |
20 | } | |
21 | ||
22 | &.check { | |
23 | stroke-dashoffset: -100; | |
24 | -webkit-animation: dash-check .9s .35s ease-in-out forwards; | |
25 | animation: dash-check .9s .35s ease-in-out forwards; | |
26 | } | |
27 | } | |
28 | ||
29 | p { | |
30 | text-align: center; | |
31 | margin: 20px 0 60px; | |
32 | font-size: 1.25em; | |
33 | ||
34 | &.success { | |
35 | color: #73AF55; | |
36 | } | |
37 | } | |
38 | ||
39 | ||
40 | @-webkit-keyframes dash { | |
41 | 0% { | |
42 | stroke-dashoffset: 1000; | |
43 | } | |
44 | 100% { | |
45 | stroke-dashoffset: 0; | |
46 | } | |
47 | } | |
48 | ||
49 | @keyframes dash { | |
50 | 0% { | |
51 | stroke-dashoffset: 1000; | |
52 | } | |
53 | 100% { | |
54 | stroke-dashoffset: 0; | |
55 | } | |
56 | } | |
57 | ||
58 | @-webkit-keyframes dash-check { | |
59 | 0% { | |
60 | stroke-dashoffset: -100; | |
61 | } | |
62 | 100% { | |
63 | stroke-dashoffset: 900; | |
64 | } | |
65 | } | |
66 | ||
67 | @keyframes dash-check { | |
68 | 0% { | |
69 | stroke-dashoffset: -100; | |
70 | } | |
71 | 100% { | |
72 | stroke-dashoffset: 900; | |
73 | } | |
74 | } |