الأحد، 21 يناير 2018

احصل على هذة الاداة من هنا

#1 | صفحات تحميل احترافية



السلام عليكم ورحمة
الله وبركاته
--
 نقدم لكم في هذه التدوينة مجموعة من صفحات التحميل
تضيف هذه الاخيرة حلة انيقة الى موقع
لكن في حقيقة الأمر قد تكون مصدر ازعاج للزائر ان كان النت عنده ضعيف





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

    1. توجه الى القالب ثم تحرير html
    2. ضع كود الشكل المختار فوق <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>




                      1. اذا واجهت اي مشكلة ضعها بتعليق


                    EmoticonEmoticon