U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

4 اضافات تحميل الصفحات بشكل رائع جدا و مميز


اقدم لكم 4 اضافات تحميل الصفحات 
بشكل رائع جدا و مميز






احدث إضافات التحميل اقدمها لكم

ما يميز شكل المدونة عن الأخرى , هي الإضافات و التعديلات و التميز و الإختلاف ..
إضافة تأثير تحميل المدونة لمدونات بلوجر , إضافة مميزة , خفيفة و لا تأثر في سرعة مدونتك كما أنها متوافقة مع جميع المتصفحات و الأجهزة.
إضافة إلى أنها تجعل الزائر مهتما أكثر من ذي قبل لقراءة التدوينة أو مشاهدة الموقع .. فلو كانت تحميل مدونتك بطيئا , فالزئر سيملّ
من الإنتظار أما صفحة بيضاء ..!



اليوم جلبت لكم اضافات التحميل جديدة وحصرية فقط علي مدونة هلا تك وهي اضافة تاثير التحميل بشكل احترافي وهو يشبه شكل  ولكن هذا الشكل جيد وبالالوان ايضا وسريع وجميل والوان مريحة للعين ويجذب الزوار لموقعك والان نتقل الي


طريقة التركيب

توجه الى القالب ثم تحرير html
ضع كود الشكل المختار فوق <body>


الشكل الاول


<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>


الشكل الثاني


<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>


الشكل الثالث

<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>

الشكل الرابع

<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>



و شكرا













الاسمبريد إلكترونيرسالة