bitcoin-atm
bitcoin atm for pyc inc.
git clone https://9o.is/git/bitcoin-atm.git
loading.less
(1391B)
1 // loading screen with dancing bitcoins
2
3 .step.loading {
4 display: table;
5
6 .centered {
7 display: table-cell;
8 vertical-align:middle;
9
10 * {
11 margin: 0 auto;
12 }
13 }
14 }
15
16 @mini-bitcoin-width: @screen-width / 8;
17 @mini-bitcoin-tops: 50px;
18
19 div.loading-bitcoins {
20 padding-top: @mini-bitcoin-tops;
21 }
22
23 // NOTE: set margin height is fixed
24 div.loading-bitcoin {
25 position: relative;
26 height: 150px;
27 width: @mini-bitcoin-width !important;
28 display: inline-block;
29 margin: 0 (@mini-bitcoin-width / 2) (@mini-bitcoin-width / 4);
30 overflow: visible;
31
32 &:hover img {
33 animation: jump 0.5s infinite alternate;
34 }
35
36 img {
37 position: absolute;
38 top: -(@mini-bitcoin-width) + @mini-bitcoin-tops;
39 width: @mini-bitcoin-width;
40 margin: 100px 0 100px -40px !important;
41
42 transition: color .25s linear;
43 transition: border-color .25s linear;
44 animation: jump 0.5s infinite alternate;
45
46 &.one {
47 animation-delay: 0s;
48 }
49
50 &.two {
51 animation-delay: 0.1s;
52 }
53
54 &.three {
55 animation-delay: 0.2s;
56 }
57
58 &.four {
59 animation-delay: 0.3s;
60 }
61
62 &.five {
63 animation-delay: 0.4s;
64 }
65 }
66 }
67
68 @keyframes jump {
69 0% {
70 top: -40px;
71 -moz-transform: scale(1,0.7);
72 transform: scale(1,0.7);
73 }
74 30% {
75 -moz-transform: scale(1,1);
76 transform: scale(1,1);
77 }
78 100% {top: -120px;}
79 }