]>
Commit | Line | Data |
---|---|---|
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 | animation: dash .9s ease-in-out; | |
13 | } | |
14 | ||
15 | &.line { | |
16 | stroke-dashoffset: 1000; | |
17 | animation: dash .9s .35s ease-in-out forwards; | |
18 | } | |
19 | ||
20 | &.check { | |
21 | stroke-dashoffset: -100; | |
22 | animation: dash-check .9s .35s ease-in-out forwards; | |
23 | } | |
24 | } | |
25 | ||
26 | .bottom-message { | |
27 | text-align: center; | |
28 | margin: 20px 0 60px; | |
29 | font-size: 1.25em; | |
30 | color: #73AF55; | |
31 | } | |
32 | ||
33 | .alert { | |
34 | font-size: 15px; | |
35 | text-align: center; | |
36 | } | |
37 | ||
38 | @keyframes dash { | |
39 | 0% { | |
40 | stroke-dashoffset: 1000; | |
41 | } | |
42 | 100% { | |
43 | stroke-dashoffset: 0; | |
44 | } | |
45 | } | |
46 | ||
47 | @keyframes dash-check { | |
48 | 0% { | |
49 | stroke-dashoffset: -100; | |
50 | } | |
51 | 100% { | |
52 | stroke-dashoffset: 900; | |
53 | } | |
54 | } |