4 Additions to load pages very Nicely Th3safelink What distinguishes the form of the blog from the other, are the additions and modification...
4 Additions to load pages very Nicely Th3safelink
What distinguishes the form of the blog from the other, are the additions and modifications, the distinction and the difference..
Add the effect of blog loading to blogger blogs, a distinctive addition, light and does not affect the speed of your blog, as it is compatible with all browsers and devices.
In addition, it makes the visitor more interested than before to read the post or view the site .. If the blog loads slowly, the visitor will get bored
Waiting for a white page ..!
Method of Installation:
Head over to the template and edit HTML
Place the selected shape code over <body>
First Form
<style>
#cookingbody {
width: 100%;
height: 100%;
background:#ffde6b; position: fixed; left: 0px; top:0px; z-index: +100000;
}
#cooking {
position: relative;
margin: 0 auto;
top: 0;
width: 75vh;
height: 75vh;
background:#ffde6b; left: 0px; top:0px; z-index: +100000;
}
#cookingbody h1 {
position: absolute;
margin: 0 auto;
right: 250px;
top: 81px;
text-align: center;
font-family: sans-serif;
font-size: 3vh;
color: #333;
opacity: .75;
animation: pulse 2.5s linear infinite;
}
#cooking .bubble {
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0.25vh #4d4d4d;
opacity: 0;
}
#cooking .bubble:nth-child(1) {
margin-top: 2.5vh;
left: 58%;
width: 2.5vh;
height: 2.5vh;
background-color: #454545;
animation: bubble 2s cubic-bezier(0.53, 0.16, 0.39, 0.96) infinite;
}
#cooking .bubble:nth-child(2) {
margin-top: 3vh;
left: 52%;
width: 2vh;
height: 2vh;
background-color: #3d3d3d;
animation: bubble 2s ease-in-out 0.35s infinite;
}
#cooking .bubble:nth-child(3) {
margin-top: 1.8vh;
left: 50%;
width: 1.5vh;
height: 1.5vh;
background-color: #333;
animation: bubble 1.5s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
}
#cooking .bubble:nth-child(4) {
margin-top: 2.7vh;
left: 56%;
width: 1.2vh;
height: 1.2vh;
background-color: #2b2b2b;
animation: bubble 1.8s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.9s infinite;
}
#cooking .bubble:nth-child(5) {
margin-top: 2.7vh;
left: 63%;
width: 1.1vh;
height: 1.1vh;
background-color: #242424;
animation: bubble 1.6s ease-in-out 1s infinite;
}
#cooking #area {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
background-color: transparent;
transform-origin: 15% 60%;
animation: flip 2.1s ease-in-out infinite;
}
#cooking #area #sides {
position: absolute;
width: 100%;
height: 100%;
transform-origin: 15% 60%;
animation: switchSide 2.1s ease-in-out infinite;
}
#cooking #area #sides #handle {
position: absolute;
bottom: 18%;
right: 80%;
width: 35%;
height: 20%;
background-color: transparent;
border-top: 1vh solid #333;
border-left: 1vh solid transparent;
border-radius: 100%;
transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9);
}
#cooking #area #sides #pan {
position: absolute;
bottom: 20%;
right: 30%;
width: 50%;
height: 8%;
background-color: #333;
border-radius: 0 0 1.4em 1.4em;
transform-origin: -15% 0;
}
#cooking #area #pancake {
position: absolute;
top: 24%;
width: 100%;
height: 100%;
transform: rotateX(85deg);
animation: jump 2.1s ease-in-out infinite;
}
#cooking #area #pancake #pastry {
position: absolute;
bottom: 26%;
right: 37%;
width: 40%;
height: 45%;
background-color: #333;
box-shadow: 0 0 3px 0 #333;
border-radius: 100%;
transform-origin: -20% 0;
animation: fly 2.1s ease-in-out infinite;
}
@keyframes jump {
0% {
top: 24%;
transform: rotateX(85deg);
}
25% {
top: 10%;
transform: rotateX(0deg);
}
50% {
top: 30%;
transform: rotateX(85deg);
}
75% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(85deg);
}
}
@keyframes flip {
0% {
transform: rotate(0deg);
}
5% {
transform: rotate(-27deg);
}
30%, 50% {
transform: rotate(0deg);
}
55% {
transform: rotate(27deg);
}
83.3% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes switchSide {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes fly {
0% {
bottom: 26%;
transform: rotate(0deg);
}
10% {
bottom: 40%;
}
50% {
bottom: 26%;
transform: rotate(-190deg);
}
80% {
bottom: 40%;
}
100% {
bottom: 26%;
transform: rotate(0deg);
}
}
@keyframes bubble {
0% {
transform: scale(0.15, 0.15);
top: 80%;
opacity: 0;
}
50% {
transform: scale(1.1, 1.1);
opacity: 1;
}
100% {
transform: scale(0.33, 0.33);
top: 60%;
opacity: 0;
}
}
@keyframes pulse {
0% {
transform: scale(1, 1);
opacity: 0.25;
}
50% {
transform: scale(1.2, 1);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 0.25;
}
}
</style>
<script>
//<![CDATA[
$(window).bind("load", function() {
$('#cooking').slideUp(1000);
});
$(window).bind("load", function() {
$('#cookingbody').slideUp(1000);
});
//]]>
</script>
<div id="cookingbody">
<h1>Cooking in progress..</h1>
<div id="cooking">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div id="area">
<div id="sides">
<div id="pan"></div>
<div id="handle"></div>
</div>
<div id="pancake">
<div id="pastry"></div>
</div>
</div>
</div>
</div>
The second figure
<style>
.loaderbody {
width: 100%;
height: 100%;
background:#F2F1EF; position: fixed; left: 0px; top:0px; z-index: +100000;
}
.loader {
position: relative;
margin: 0 auto;
top: 50%;
background:#ffde6b; left: 0px; z-index: +100000;
transform: translate(-50%, -50%);
width: 50px;
height: 10px;
background: #3498db;
border-radius: 5px;
animation: load 1.8s ease-in-out infinite;
}
.loader:before, .loader:after {
position: absolute;
display: block;
content: "";
animation: load 1.8s ease-in-out infinite;
height: 10px;
border-radius: 5px;
}
.loader:before {
top: -20px;
left: 10px;
width: 40px;
background: #ef4836;
}
.loader:after {
bottom: -20px;
width: 35px;
background: #f5ab35;
}
@keyframes load {
0% {
transform: translateX(40px);
}
50% {
transform: translateX(-30px);
}
100% {
transform: translateX(40px);
}
}
</style>
<script>
//<![CDATA[
$(window).bind("load", function() {
$('.loader').slideUp(1000);
});
$(window).bind("load", function() {
$('.loaderbody').slideUp(1000);
});
//]]>
</script>
<div class='loaderbody'>
<div class="loader"></div>
</div>
Figure three
<style>
.loadingbody {
width: 100%;
height: 100%;
background:#4492f4; position: fixed; left: 0px; top:0px; z-index: +100000;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
margin: -35px 0 0 -56px;
width: 112px;
height: 70px;
*zoom: 1;
}
.loading:before,
.loading:after {
display: table;
content: "";
}
.loading:after {
clear: both;
}
.loading .finger {
float: left;
margin: 0 2px 0 0;
width: 20px;
height: 100%;
}
.loading .finger-1 {
-webkit-animation: finger-1-animation 2s infinite ease-out;
animation: finger-1-animation 2s infinite ease-out;
}
.loading .finger-1 span {
-webkit-animation: finger-1-animation-span 2s infinite ease-out;
animation: finger-1-animation-span 2s infinite ease-out;
}
.loading .finger-1 i {
-webkit-animation: finger-1-animation-i 2s infinite ease-out;
animation: finger-1-animation-i 2s infinite ease-out;
}
.loading .finger-2 {
-webkit-animation: finger-2-animation 2s infinite ease-out;
animation: finger-2-animation 2s infinite ease-out;
}
.loading .finger-2 span {
-webkit-animation: finger-2-animation-span 2s infinite ease-out;
animation: finger-2-animation-span 2s infinite ease-out;
}
.loading .finger-2 i {
-webkit-animation: finger-2-animation-i 2s infinite ease-out;
animation: finger-2-animation-i 2s infinite ease-out;
}
.loading .finger-3 {
-webkit-animation: finger-3-animation 2s infinite ease-out;
animation: finger-3-animation 2s infinite ease-out;
}
.loading .finger-3 span {
-webkit-animation: finger-3-animation-span 2s infinite ease-out;
animation: finger-3-animation-span 2s infinite ease-out;
}
.loading .finger-3 i {
-webkit-animation: finger-3-animation-i 2s infinite ease-out;
animation: finger-3-animation-i 2s infinite ease-out;
}
.loading .finger-4 {
-webkit-animation: finger-4-animation 2s infinite ease-out;
animation: finger-4-animation 2s infinite ease-out;
}
.loading .finger-4 span {
-webkit-animation: finger-4-animation-span 2s infinite ease-out;
animation: finger-4-animation-span 2s infinite ease-out;
}
.loading .finger-4 i {
-webkit-animation: finger-4-animation-i 2s infinite ease-out;
animation: finger-4-animation-i 2s infinite ease-out;
}
.loading .finger-item {
position: relative;
width: 100%;
height: 100%;
-webkit-border-radius: 6px 6px 8px 8px;
-webkit-background-clip: padding-box;
-moz-border-radius: 6px 6px 8px 8px;
-moz-background-clip: padding;
border-radius: 6px 6px 8px 8px;
background-clip: padding-box;
background: #fff;
}
.loading .finger-item span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
padding: 5px 5px 0 5px;
}
.loading .finger-item span:before,
.loading .finger-item span:after {
content: '';
position: relative;
display: block;
margin: 0 0 2px 0;
width: 100%;
height: 2px;
background: #4492f4;
}
.loading .finger-item i {
position: absolute;
left: 3px;
bottom: 3px;
width: 14px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
background: #4492f4;
}
.loading .last-finger {
position: relative;
float: left;
width: 24px;
height: 100%;
overflow: hidden;
}
.loading .last-finger-item {
position: absolute;
right: 0;
top: 32px;
width: 110%;
height: 20px;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
background: #fff;
-webkit-animation: finger-5-animation 2s infinite linear;
animation: finger-5-animation 2s infinite linear;
}
.loading .last-finger-item i {
position: absolute;
left: 0;
top: -8px;
width: 22px;
height: 8px;
background: #fff;
overflow: hidden;
}
.loading .last-finger-item i:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 34px;
height: 20px;
-webkit-border-radius: 0 0 15px 15px;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 0 15px 15px;
-moz-background-clip: padding;
border-radius: 0 0 15px 15px;
background-clip: padding-box;
background: #4492f4;
}
@-webkit-keyframes finger-1-animation {
0% {
padding: 12px 0 5px 0;
}
20% {
padding: 12px 0 5px 0;
}
29% {
padding: 4px 0 24px 0;
}
35% {
padding: 4px 0 24px 0;
}
41% {
padding: 12px 0 5px 0;
}
100% {
padding: 12px 0 5px 0;
}
}
@keyframes finger-1-animation {
0% {
padding: 12px 0 5px 0;
}
20% {
padding: 12px 0 5px 0;
}
29% {
padding: 4px 0 24px 0;
}
35% {
padding: 4px 0 24px 0;
}
41% {
padding: 12px 0 5px 0;
}
100% {
padding: 12px 0 5px 0;
}
}
@-webkit-keyframes finger-1-animation-span {
0% {
top: 0;
}
20% {
top: 0;
}
29% {
top: -7px;
}
35% {
top: -7px;
}
41% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-1-animation-span {
0% {
top: 0;
}
20% {
top: 0;
}
29% {
top: -7px;
}
35% {
top: -7px;
}
41% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-1-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
20% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
29% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
35% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
41% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-1-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
20% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
29% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
35% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
41% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-2-animation {
0% {
padding: 6px 0 2px 0;
}
24% {
padding: 6px 0 2px 0;
}
33% {
padding: 2px 0 16px 0;
}
39% {
padding: 2px 0 16px 0;
}
45% {
padding: 6px 0 2px 0;
}
100% {
padding: 6px 0 2px 0;
}
}
@keyframes finger-2-animation {
0% {
padding: 6px 0 2px 0;
}
24% {
padding: 6px 0 2px 0;
}
33% {
padding: 2px 0 16px 0;
}
39% {
padding: 2px 0 16px 0;
}
45% {
padding: 6px 0 2px 0;
}
100% {
padding: 6px 0 2px 0;
}
}
@-webkit-keyframes finger-2-animation-span {
0% {
top: 0;
}
24% {
top: 0;
}
33% {
top: -7px;
}
39% {
top: -7px;
}
45% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-2-animation-span {
0% {
top: 0;
}
24% {
top: 0;
}
33% {
top: -7px;
}
39% {
top: -7px;
}
45% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-2-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
24% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
33% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
39% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
45% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-2-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
24% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
33% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
39% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
45% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-3-animation {
0% {
padding: 0 0 0 0;
}
28% {
padding: 0 0 0 0;
}
37% {
padding: 0 0 12px 0;
}
43% {
padding: 0 0 12px 0;
}
49% {
padding: 0 0 0 0;
}
100% {
padding: 0 0 0 0;
}
}
@keyframes finger-3-animation {
0% {
padding: 0 0 0 0;
}
28% {
padding: 0 0 0 0;
}
37% {
padding: 0 0 12px 0;
}
43% {
padding: 0 0 12px 0;
}
49% {
padding: 0 0 0 0;
}
100% {
padding: 0 0 0 0;
}
}
@-webkit-keyframes finger-3-animation-span {
0% {
top: 0;
}
28% {
top: 0;
}
37% {
top: -7px;
}
43% {
top: -7px;
}
49% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-3-animation-span {
0% {
top: 0;
}
28% {
top: 0;
}
37% {
top: -7px;
}
43% {
top: -7px;
}
49% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-3-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
28% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
37% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
43% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
49% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-3-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
28% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
37% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
43% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
49% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-4-animation {
0% {
padding: 8px 0 3px 0;
}
32% {
padding: 8px 0 3px 0;
}
41% {
padding: 4px 0 20px 0;
}
47% {
padding: 4px 0 20px 0;
}
53% {
padding: 8px 0 3px 0;
}
100% {
padding: 8px 0 3px 0;
}
}
@keyframes finger-4-animation {
0% {
padding: 8px 0 3px 0;
}
32% {
padding: 8px 0 3px 0;
}
41% {
padding: 4px 0 20px 0;
}
47% {
padding: 4px 0 20px 0;
}
53% {
padding: 8px 0 3px 0;
}
100% {
padding: 8px 0 3px 0;
}
}
@-webkit-keyframes finger-4-animation-span {
0% {
top: 0;
}
32% {
top: 0;
}
41% {
top: -7px;
}
47% {
top: -7px;
}
53% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes finger-4-animation-span {
0% {
top: 0;
}
32% {
top: 0;
}
41% {
top: -7px;
}
47% {
top: -7px;
}
53% {
top: 0;
}
100% {
top: 0;
}
}
@-webkit-keyframes finger-4-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
32% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
41% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
47% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
53% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@keyframes finger-4-animation-i {
0% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
32% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
41% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
47% {
bottom: 8px;
height: 12px;
-webkit-border-radius: 7px 7px 4px 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 7px 7px 4px 4px;
-moz-background-clip: padding;
border-radius: 7px 7px 4px 4px;
background-clip: padding-box;
}
53% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
100% {
bottom: 3px;
height: 14px;
-webkit-border-radius: 10px 10px 7px 7px;
-webkit-background-clip: padding-box;
-moz-border-radius: 10px 10px 7px 7px;
-moz-background-clip: padding;
border-radius: 10px 10px 7px 7px;
background-clip: padding-box;
}
}
@-webkit-keyframes finger-5-animation {
0% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
34% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
43% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
50% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
60% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes finger-5-animation {
0% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
34% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
43% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
50% {
top: 20px;
right: 2px;
-webkit-border-radius: 0 8px 20px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 8px 20px 0;
-moz-background-clip: padding;
border-radius: 0 8px 20px 0;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
60% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
top: 32px;
right: 0;
-webkit-border-radius: 0 5px 14px 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 5px 14px 0;
-moz-background-clip: padding;
border-radius: 0 5px 14px 0;
background-clip: padding-box;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.credits-info {
position: absolute;
left: 0;
top: 0;
padding: 20px 0 0 20px;
opacity: 50;
}
.credits-info h1 {
margin: 0 0 25px 0;
font-size: 22px;
font-weight: 300;
color: #fff;
}
.credits-info p {
margin: 0 0 15px 0;
max-width: 320px;
font-size: 14px;
font-weight: 300;
line-height: 1.4em;
color: #fff;
}
.credits-info span {
margin: 0 5px;
opacity: 30;
}
.credits-info a {
color: #fff;
border-bottom: 1px solid #fff;
text-decoration: none;
}
.credits-info a:hover {
border-bottom: 3px solid #fff;
}
* {
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: #4492f4;
}
</style>
<script>
//<![CDATA[
$(window).bind("load", function() {
$('.loading').slideUp(1000);
});
$(window).bind("load", function() {
$('.loadingbody').slideUp(1000);
});
//]]>
</script>
<div class='loadingbody'>
<div class="loading">
<div class="finger finger-1">
<div class="finger-item">
<span></span><i></i>
</div>
</div>
<div class="finger finger-2">
<div class="finger-item">
<span></span><i></i>
</div>
</div>
<div class="finger finger-3">
<div class="finger-item">
<span></span><i></i>
</div>
</div>
<div class="finger finger-4">
<div class="finger-item">
<span></span><i></i>
</div>
</div>
<div class="last-finger">
<div class="last-finger-item"><i></i></div>
</div>
</div>
</div>
Four Figure (IV)
<style>
.globalbody {
width: 100%;
height: 100%;
background:#282828; position: fixed; left: 0px; top:0px; z-index: +100000;
}
#global {
margin-top: 15% !important;
width: 70px;
margin: auto;
position: relative;
cursor: pointer;
height: 60px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.plane {
background: #ffffff;
width: 400%;
height: 100%;
position: absolute;
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
/*transition: all 0.8s ease; */
z-index: 100;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.animation {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#top .plane {
z-index: 2000;
-webkit-animation: trans1 1.3s ease-in infinite 0s backwards;
animation: trans1 1.3s ease-in infinite 0s backwards;
}
#middle .plane {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
background: #bbbbbb;
-webkit-animation: trans2 1.3s linear infinite 0.3s backwards;
animation: trans2 1.3s linear infinite 0.3s backwards;
}
#bottom .plane {
z-index: 2000;
-webkit-animation: trans3 1.3s ease-out infinite 0.7s backwards;
animation: trans3 1.3s ease-out infinite 0.7s backwards;
}
#top {
width: 53px;
height: 20px;
left: 20px;
-webkit-transform: skew(-15deg, 0);
transform: skew(-15deg, 0);
z-index: 100;
}
#middle {
width: 33px;
height: 20px;
left: 20px;
top: 15px;
-webkit-transform: skew(-15deg, 40deg);
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
top: 30px;
-webkit-transform: skew(-15deg, 0);
transform: skew(-15deg, 0);
}
p {
color: #fff;
position: absolute;
left: -3px;
top: 70px;
font-family: sans-serif;
text-align: center;
font-size: 10px;
}
@-webkit-keyframes trans1 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
}
@keyframes trans1 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
}
@-webkit-keyframes trans2 {
from {
-webkit-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0);
}
to {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
}
@keyframes trans2 {
from {
-webkit-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0);
}
to {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
}
@-webkit-keyframes trans3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
@keyframes trans3 {
from {
-webkit-transform: translate3d(53px, 0, 0);
transform: translate3d(53px, 0, 0);
}
to {
-webkit-transform: translate3d(-220px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
@-webkit-keyframes animColor {
from {
background: red;
}
25% {
background: yellow;
}
50% {
background: green;
}
75% {
background: brown;
}
to {
background: blue;
}
}
@keyframes animColor {
from {
background: red;
}
25% {
background: yellow;
}
50% {
background: green;
}
75% {
background: brown;
}
to {
background: blue;
}
}
</style>
<script>
//<![CDATA[
$(window).bind("load", function() {
$('#global').slideUp(1000);
});
$(window).bind("load", function() {
$('.globalbody').slideUp(1000);
});
//]]>
</script>
<div class='globalbody'>
<section id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
<p><i>LOADING...</i></p>
</section>
</div>
No comments