html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Created by DAYKEL TOVAR -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="cargando">
<h1 class="blinking"><i>LOADING...</i></h1>
</div>
<div class = "animated fadeIn"></div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
/* Created by DAYKEL TOVAR */
.blinking{
animation:lb 1.2s infinite; }
@keyframes lb{
0%{ color: #000; }
49%{ color: #000; }
60%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; } }
.animated { background-image: url(https://i.blogs.es/65e246/traductor-de-google/650_1200.jpg);
content:*;
background-repeat: no-repeat;
background-position: left top;
padding-top:550px; margin-bottom:6px;
-webkit-animation-duration:18s;
animation-duration: 18s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;} }
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;} }
.fadeIn {
-webkit-animation-name:
fadeIn; animation-name: fadeIn; }
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
// Created by DAYKEL TOVAR
window.onload= function() {
setInterval(function(){
var carga= document.getElementById("cargando")
carga.style.visibility='hidden';
carga.style.opacity='0';
},10000);}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run