Ajax Loader
×
HTML 
<!-- Logo Nube Storage Jopbox ❤ by @mrjopino -->
1
<!-- Logo Nube Storage Jopbox ❤ by @mrjopino -->
2
<div class="logo">
3
  <div class="corazon">❤❤</div>
4
  <div id="animacion"><i></i></div>
5
  <h1>✖</h1>
6
 
7
 
 
CSS 
/* Storage jopbox */
1
/* Storage jopbox */
2
@import url(http://fonts.googleapis.com/css?family=Lobster|Titan+One);
3
.logo {
4
  margin:50px 195px;
5
  width:160px;
6
  height:160px;
7
  border-radius:100%;
8
  margin: 2% auto;
9
  text-shadow: 1px 2px 1px rgba(0,0,0,.4); /* Sombrita */
10
  /* Compatibilidades de logo */
11
background-image: -ms-linear-gradient(bottom, #FD2D65 0%, #FF5E3A 100%);
12
background-image: -moz-linear-gradient(bottom, #FD2D65 0%, #FF5E3A 100%);
13
background-image: -o-linear-gradient(bottom, #FD2D65 0%, #FF5E3A 100%);
14
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FD2D65), color-stop(1, #FF5E3A));
15
background-image: -webkit-linear-gradient(bottom, #FD2D65 0%, #FF5E3A 100%);
16
background-image: linear-gradient(to top, #FD2D65 0%, #FF5E3A 100%);
17
  position:relative;
18
  overflow:hidden;
19
}
20
h1 {
21
  font: 40px Lobster;
22
  color: white;
23
  text-align: center;
24
  margin-right: 13px;
25
  margin: 5% auto 0;
26
  opacity: 1;
27
}
28
h1:hover {
29
  text-shadow: 2px 2px 50px white;
30
}
31
div:hover {
32
  text-shadow: 2px 2px 50px white;
33
}
34
 
35
.nube{
36
  width:90px;
37
  height:35px;
38
  border-radius:30px;
39
  position:absolute;
40
  background:#fff;
41
  top:75px;
42
  left:35px;
43
  text-shadow: 1px 2px 1px rgba(0,0,0,.4); /* Sombrita */
44
}
45
.nube:after {
46
  content:'';
47
  width:60px;
48
  height:50px;
49
  border-radius:100%;
50
  background:#fff;
51
  position:absolute;
52
  top:-25px;
53
  left:15px;
54
}
55
.corazon {
56
  text-align:center;
57
  margin:auto;
58
  font-family: Titan One;
59
  font-size:60px;
60
  color: #e8367f;
61
  margin: 2% auto 0;
62
}
63
#animacion {
64
  width: 0;
65
  height: 0;
66
  right: 50%;
67
  font-size: 5em;
68
  border-left: 0.3em solid transparent;
69
  border-right: 0.3em solid transparent;
70
  border-bottom: 0.3em solid white;
71
  position: absolute;
72
  margin-right: -0.3em;
73
  margin-top: -0.75em;
74
  animation: move 1.5s infinite ease-in-out;
75
  opacity: 1;
76
}
77
 
78
#animacion i {
79
  width: 0.3em;
80
  height: 0.35em;
81
  display: block;
82
  background: white;
83
  margin-left: -0.15em;
84
  margin-top: 0.15em;
85
}
86
/* El Keyframe movimiento */
87
@keyframes move {
88
  10% {margin-top: -0.2em; /*opacity: 1;*/}
89
  50% {/*opacity: 1;*/}
90
  100% {margin-top: -0em; opacity: 0;}
91
}
92
 
 

Logo Jopbox love

CSSDeck G+