Efeito Loading No Blogger Versão #2
Nesta postagem compartilho com vocês este efeito loading. Este efeito loading, como vocês podem ver é diferente dos outros que postei aqui no site; este fica fixado no canto da tela.
Para colocar no blog é simples...
Entre em "Layout" - "Adicionar um Gadget" e cole o seguinte código
<style>
#ContainermptDicasHot {
width: 400px;
position: fixed;
top: -200px;
right: -200px;
z-index: 999999999999999999999;
height: 400px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: rgba(1, 5, 14, 0.65);
-webkit-box-shadow: 0 0 10px black, 0 0 10px black inset;
-moz-box-shadow: 0 0 10px black, 0 0 10px black inset;
box-shadow: 0 0 10px black, 0 0 10px black inset;
-webkit-transition:1s linear;
-moz-transition:1s linear;
-o-transition:1s linear;
transition:1s linear;
}
#OutermptDicasHot {
width: 75px;
height: 75px;
position: relative;
margin-top: 269px;
margin-left: 153px;
border-top: 7px solid black;
border-left: 7px solid black;
border-right: 7px solid black;
border-bottom: 7px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-animation: infinite load 7s linear;
-moz-animation: infinite load 7s linear;
-ms-animation: infinite load 7s linear;
-o-animation: infinite load 7s linear;
animation: infinite load 7s linear;
background: #DADADA;
-webkit-transform: rotate(0deg);
}
#InnermptDicasHot {
width: 45px;
height: 45px;
border-top: 7px solid black;
border-left: 7px solid black;
border-right: 7px solid black;
border-bottom: 7px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-animation: infinite load 2s linear;
-moz-animation: infinite load 2s linear;
-ms-animation: infinite load 2s linear;
-o-animation: infinite load 2s linear;
animation: infinite load 2s linear;
margin: 8px auto;
-webkit-transform: rotate(0deg);
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
-webkit-rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-webkit-rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes load {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes load {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes load {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.mpt-hide {
opacity: 0;
-webkit-transition:1s linear;
-moz-transition:1s linear;
-o-transition:1s linear;
transition:1s linear;
}
</style>
<script>
function hide() {
document.getElementById("ContainermptDicasHot").setAttribute("class","mpt-hide");
}
</script>
<div id='ContainermptDicasHot'>
<div id='OutermptDicasHot'>
<div id='InnermptDicasHot'></div></div></div>
Tendo colado o código, salve.
Agora, entre em "Molelo" - "Editar HTML" e procure pela tag
<body>
Tendo encontrado a tag, substitua ela por
<body onload='hide()'>
Tendo feito isto, salve e pronto!!!
