131 lines
No EOL
2.6 KiB
CSS
131 lines
No EOL
2.6 KiB
CSS
@charset "utf-8";
|
|
/* CSS Document */
|
|
|
|
/**Background transparent*/
|
|
div.blackout{
|
|
|
|
position: fixed !important;
|
|
top:0;
|
|
left:0;
|
|
z-index:9999;
|
|
background-color:rgba(0, 0, 0, .20);
|
|
width:100%;
|
|
height:100%;
|
|
backdrop-filter: blur(5px);
|
|
-webkit-backdrop-filter: blur(5px);
|
|
|
|
}
|
|
|
|
/**Loader para conteudo*/
|
|
div.spinner-box{
|
|
|
|
position:fixed;
|
|
width:auto;
|
|
height:54px;
|
|
left:50%;
|
|
top:40%;
|
|
padding: 2px;
|
|
z-index:99999;
|
|
|
|
}
|
|
|
|
div.spinner {
|
|
|
|
position: absolute;
|
|
width: 54px;
|
|
height: 54px;
|
|
display: inline-block;
|
|
background: #74a6f2;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
div.spinner div {
|
|
width: 6%;
|
|
height: 16%;
|
|
background: #FFF;
|
|
position: absolute;
|
|
left: 49%;
|
|
top: 43%;
|
|
opacity: 0;
|
|
-webkit-border-radius: 50px;
|
|
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
|
|
-webkit-animation: fade 1s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes fade {
|
|
from {opacity: 1;}
|
|
to {opacity: 0.25;}
|
|
}
|
|
|
|
div.spinner div.bar1 {
|
|
-webkit-transform:rotate(0deg) translate(0, -130%);
|
|
-webkit-animation-delay: 0s;
|
|
}
|
|
|
|
div.spinner div.bar2 {
|
|
-webkit-transform:rotate(30deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.9167s;
|
|
}
|
|
|
|
div.spinner div.bar3 {
|
|
-webkit-transform:rotate(60deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.833s;
|
|
}
|
|
div.spinner div.bar4 {
|
|
-webkit-transform:rotate(90deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.7497s;
|
|
}
|
|
div.spinner div.bar5 {
|
|
-webkit-transform:rotate(120deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.667s;
|
|
}
|
|
div.spinner div.bar6 {
|
|
-webkit-transform:rotate(150deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.5837s;
|
|
}
|
|
div.spinner div.bar7 {
|
|
-webkit-transform:rotate(180deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.5s;
|
|
}
|
|
div.spinner div.bar8 {
|
|
-webkit-transform:rotate(210deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.4167s;
|
|
}
|
|
div.spinner div.bar9 {
|
|
-webkit-transform:rotate(240deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.333s;
|
|
}
|
|
div.spinner div.bar10 {
|
|
-webkit-transform:rotate(270deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.2497s;
|
|
}
|
|
div.spinner div.bar11 {
|
|
-webkit-transform:rotate(300deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.167s;
|
|
}
|
|
div.spinner div.bar12 {
|
|
-webkit-transform:rotate(330deg) translate(0, -130%);
|
|
-webkit-animation-delay: -0.0833s;
|
|
}
|
|
|
|
div.spinner-txt {
|
|
|
|
position: absolute;
|
|
width: auto;
|
|
height: 54px;
|
|
top: 15px;
|
|
margin-left: 56px;
|
|
text-align: center;
|
|
color: #000;
|
|
text-shadow: #FFF 1px 1px;
|
|
}
|
|
|
|
div.btn-exemple{
|
|
|
|
margin: 60px;
|
|
}
|
|
|
|
div.btn-exemple button{
|
|
|
|
margin: 2px;
|
|
} |