اضافة Preloader بشكل رائع الى مدونتك
شرح طريقة التركيب
1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>
2. ضع الشكل المختار أسفله
الشكل 1
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px; background-color: #fff; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; }@-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"> <div class="zonearab-spinner"></div></div>
الشكل 2
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px;}.zonearabcube1, .zonearabcube2 { background-color: #fff; width: 15px; height: 15px; position: absolute; top: 0; left: 0; -webkit-animation: sk-zonearabcubemove 1.8s infinite ease-in-out; animation: sk-zonearabcubemove 1.8s infinite ease-in-out; } .zonearabcube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes sk-zonearabcubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes sk-zonearabcubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"> <div class="zonearab-spinner"> <div class="zonearabcube1"></div> <div class="zonearabcube2"></div></div></div>
الشكل 3
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px; -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear; }.zonearabdot1, .zonearabdot2 { width: 60%; height: 60%; background-color: #fff; display: inline-block; position: absolute; top: 0; border-radius: 100%; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; }.zonearabdot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"><div class="zonearab-spinner"><div class="zonearabdot1"></div><div class="zonearabdot2"></div></div></div>
الشكل 4
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#e24a37;z-index: 99999; opacity: .95;}.zonearableft{position:absolute; left:0; width:50%; height:100%;}.zonearabright{position:absolute; right:0; width:50%; height:100%;}.s-zonearab{position:absolute; text-align:center; padding:0 10px; margin:0; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%)}.s-zonearab >div{width:18px; height:18px; background-color:#fff; border-radius:100%; display:inline-block; -webkit-animation:bouncezonearabdelay 1.4s infinite ease-in-out; animation:bouncezonearabdelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both}.s-zonearab .bouncezonearab1{-webkit-animation-delay:-.32s; animation-delay:-.32s}.s-zonearab .bouncezonearab2{-webkit-animation-delay:-.16s; animation-delay:-.16s}@-webkit-keyframes bouncezonearabdelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncezonearabdelay{0%,80%,100%{transform:scale(0.0); -webkit-transform:scale(0.0)}40%{transform:scale(1.0); -webkit-transform:scale(1.0)}}</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $('.s-zonearab').fadeOut("slow"); setTimeout(function () { $('#zonearab-loader').fadeOut("slow") }, 1000) }, 1000) }); </script> <div id='zonearab-loader'><div class='zonearableft'></div><div class='zonearabright'></div><div class='s-zonearab'><div class='bouncezonearab1'></div><div class='bouncezonearab2'></div><div class='bouncezonearab3'></div></div></div>
الشكل 5
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; width: 80px; height: 60px; margin: -30px 0 0 -40px; }.zonearab-spinner > div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .zonearab-spinner .zonearab-rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .zonearab-spinner .zonearab-rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .zonearab-spinner .zonearab-rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .zonearab-spinner .zonearab-rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"> <div class="zonearab-spinner"> <div class="zonearab-rect1"></div> <div class="zonearab-rect2"></div> <div class="zonearab-rect3"></div> <div class="zonearab-rect4"></div> <div class="zonearab-rect5"></div></div></div>
الشكل 6
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-circle { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px; }.zonearab-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }.zonearab-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #fff; border-radius: 100%; -webkit-animation: zonearab-circleBounceDelay 1.2s infinite ease-in-out both; animation: zonearab-circleBounceDelay 1.2s infinite ease-in-out both; }.zonearab-circle .zonearab-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }.zonearab-circle .zonearab-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .zonearab-circle .zonearab-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .zonearab-circle .zonearab-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .zonearab-circle .zonearab-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .zonearab-circle .zonearab-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .zonearab-circle .zonearab-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .zonearab-circle .zonearab-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .zonearab-circle .zonearab-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .zonearab-circle .zonearab-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .zonearab-circle .zonearab-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .zonearab-circle .zonearab-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .zonearab-circle .zonearab-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .zonearab-circle .zonearab-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .zonearab-circle .zonearab-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .zonearab-circle .zonearab-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .zonearab-circle .zonearab-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .zonearab-circle .zonearab-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .zonearab-circle .zonearab-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .zonearab-circle .zonearab-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .zonearab-circle .zonearab-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .zonearab-circle .zonearab-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes zonearab-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes zonearab-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } }</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-circle").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="zonearab-circle"> <div class="zonearab-circle1 sk-child"></div> <div class="zonearab-circle2 sk-child"></div> <div class="zonearab-circle3 sk-child"></div> <div class="zonearab-circle4 sk-child"></div> <div class="zonearab-circle5 sk-child"></div> <div class="zonearab-circle6 sk-child"></div> <div class="zonearab-circle7 sk-child"></div> <div class="zonearab-circle8 sk-child"></div> <div class="zonearab-circle9 sk-child"></div> <div class="zonearab-circle10 sk-child"></div> <div class="zonearab-circle11 sk-child"></div> <div class="zonearab-circle12 sk-child"></div></div></div>
الشكل 7
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;opacity: .95;z-index: 99999;}.zonearab-fading-circle {width: 40px; height: 40px; text-align: center; position: absolute; top: 50%; left: 50%; margin: 0 auto}.zonearab-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .zonearab-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #fff; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .zonearab-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .zonearab-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .zonearab-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .zonearab-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .zonearab-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .zonearab-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .zonearab-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .zonearab-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .zonearab-fading-circle .sk-zonearab-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .zonearab-fading-circle .sk-zonearab-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .zonearab-fading-circle .sk-zonearab-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .zonearab-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .zonearab-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .zonearab-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .zonearab-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .zonearab-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .zonearab-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .zonearab-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .zonearab-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .zonearab-fading-circle .sk-zonearab-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .zonearab-fading-circle .sk-zonearab-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .zonearab-fading-circle .sk-zonearab-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } </style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-fading-circle").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class='zonearab-fading-circle'> <div class='sk-zonearab-circle1 sk-circle'/> <div class='sk-circle2 sk-circle'/> <div class='sk-circle3 sk-circle'/> <div class='sk-circle4 sk-circle'/> <div class='sk-circle5 sk-circle'/> <div class='sk-circle6 sk-circle'/> <div class='sk-circle7 sk-circle'/> <div class='sk-circle8 sk-circle'/> <div class='sk-circle9 sk-circle'/> <div class='sk-zonearab-circle10 sk-circle'/> <div class='sk-zonearab-circle11 sk-circle'/> <div class='sk-zonearab-circle12 sk-circle'/></div></div>
الشكل 8
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-folding-cube {width: 40px; height: 40px; text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .zonearab-folding-cube .skzonearab-cube {float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .zonearab-folding-cube .skzonearab-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .zonearab-folding-cube .skzonearab-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .zonearab-folding-cube .skzonearab-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .zonearab-folding-cube .skzonearab-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .zonearab-folding-cube .skzonearab-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .zonearab-folding-cube .skzonearab-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .zonearab-folding-cube .skzonearab-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-folding-cube").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="zonearab-folding-cube"> <div class="skzonearab-cube1 skzonearab-cube"></div> <div class="skzonearab-cube2 skzonearab-cube"></div> <div class="skzonearab-cube4 skzonearab-cube"></div> <div class="skzonearab-cube3 skzonearab-cube"></div></div></div>
الشكل 9
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.wow-zonearab{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.wow-zonearab,.wow-zonearab-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid #fff;border-color:transparent #fff;margin:auto}.wow-zonearab{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.wow-zonearab-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".wow-zonearab").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="wow-zonearab"> <div class="wow-zonearab-inner"></div> </div></div>
الشكل 10
<style>#loader-zonearab{position:fixed;top:0;left:0;right:0;bottom:0;opacity: .95;background:#060606;color:#eaf7ff;z-index:99999;}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bgzonearab{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bgzonearab{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.zonearab-wrap { font-size: 18px; font-weight: 700; top: 50%; margin: auto; position: absolute; left: 0; right: 0; bottom: 0; }.bgzonearab{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bgzonearab 1.5s linear infinite;-webkit-animation:bgzonearab 1.5s linear infinite;animation:bgzonearab 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.zonearabloading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.zonearabloading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.zonearabloading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.zonearabloading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.zonearabloading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-wrap").fadeOut("slow"); setTimeout(function () { $("#loader-zonearab").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='loader-zonearab'><div class="zonearab-wrap"><div class="bgzonearab"><div class="zonearabloading"><span class="title">انتظر لحظة...</span><span class="text"><data:blog.title/></span></div> </div></div></div>
الشكل 11
<style>#tahmil-zonearab{width: 100%; height: 100%; overflow: hidden; position: fixed; left: 0; opacity: .95!important; top: 0; background: #47cf73; transition: background 1s , visibility 1s; z-index: 99999; visibility: hidden;}.boxloading_zonearab { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .boxloading_zonearab:before { content: ''; width: 50px; height: 5px; background: #000; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite; } .boxloading_zonearab:after { content: ''; width: 50px; height: 50px; background: #D55D3E; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } @keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1); } } #leftzonearab{ left: 0px; position:absolute; width:65%; height:100%; margin-left:-15%; background:rgba(0, 0, 0, 0); transform: skewX(-21deg); -webkit-transform: skewX(-21deg); transition:background 1s linear 1s, left 2s 2s; } #rightzonearab{ right: 0.6px; position:absolute; width:65%; height:100%; margin-right:-15%; background:rgba(0, 0, 0, 0); transform: skewX(-21deg); -webkit-transform: skewX(-21deg); transition:background 1s linear 1s, right 2s 2s; } .loading_zonearab { height: 85px; left: 50%; margin-left: -42.5px; margin-top: -42.5px; position: absolute; top: 50%; -webkit-transform: translateZ(0); transform: translateZ(0); width: 85px; } .loading_zonearab-circle { -webkit-animation: 2291ms loading_zonearab infinite; animation: 2291ms loading_zonearab infinite; background-color: #fff; border-radius: 50%; height: 14px; position: absolute; -webkit-transform: scale(0); transform: scale(0); width: 14px; } .loading_zonearab-circle:nth-child(1) { -webkit-animation-delay: 42ms; animation-delay: 42ms; } .loading_zonearab-circle:nth-child(2) { -webkit-animation-delay: 84ms; animation-delay: 84ms; } .loading_zonearab-circle:nth-child(3) { -webkit-animation-delay: 126ms; animation-delay: 126ms; } .loading_zonearab-circle:nth-child(4) { -webkit-animation-delay: 168ms; animation-delay: 168ms; } .loading_zonearab-circle:nth-child(5) { -webkit-animation-delay: 210ms; animation-delay: 210ms; } .loading_zonearab-circle:nth-child(6) { -webkit-animation-delay: 252ms; animation-delay: 252ms; } .loading_zonearab-circle:nth-child(7) { -webkit-animation-delay: 294ms; animation-delay: 294ms; } .loading_zonearab-circle:nth-child(8) { -webkit-animation-delay: 336ms; animation-delay: 336ms; } .loading_zonearab-circle:nth-child(9) { -webkit-animation-delay: 378ms; animation-delay: 378ms; } .loading_zonearab-circle:nth-child(10) { -webkit-animation-delay: 420ms; animation-delay: 420ms; } .loading_zonearab-circle:nth-child(11) { -webkit-animation-delay: 462ms; animation-delay: 462ms; } .loading_zonearab-circle:nth-child(12) { -webkit-animation-delay: 504ms; animation-delay: 504ms; } .loading_zonearab-circle:nth-child(13) { -webkit-animation-delay: 546ms; animation-delay: 546ms; } .loading_zonearab-row1 { top: 1.3px; } .loading_zonearab-row2 { top: 18.95px; } .loading_zonearab-row3 { top: 36.55px; } .loading_zonearab-row4 { top: 54.2px; } .loading_zonearab-row5 { top: 71.85px; } .loading_zonearab-col1 { left: 1.25px; } .loading_zonearab-col2 { left: 18.85px; } .loading_zonearab-col3 { left: 36.5px; } .loading_zonearab-col4 { left: 54.15px; } .loading_zonearab-col5 { left: 71.8px; } @-webkit-keyframes loading_zonearab { 0% { -webkit-transform: scale(0); transform: scale(0); } 27.28% { -webkit-transform: scale(1); transform: scale(1); } 36.36% { -webkit-transform: scale(0.857); transform: scale(0.857); } 54.55% { -webkit-transform: scale(0.857); transform: scale(0.857); } 63.64% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(0); transform: scale(0); } } @keyframes loading_zonearab { 0% { -webkit-transform: scale(0); transform: scale(0); } 27.28% { -webkit-transform: scale(1); transform: scale(1); } 36.36% { -webkit-transform: scale(0.857); transform: scale(0.857); } 54.55% { -webkit-transform: scale(0.857); transform: scale(0.857); } 63.64% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(0); transform: scale(0); } } #bigloading_zonearab{ width:100%; height:100%; overflow:hidden; position: fixed; left:0; top:0; background: #272727; transition: background 1s 2s , visibility 1s 2s; z-index: 10000000000; visibility: visible; } #tahmil-zonearab.ready { opacity:1; visibility:visible; } #bigloading_zonearab.ready #leftzonearab{ left:-100%; background:rgba(0, 0, 0, 0.8); } #bigloading_zonearab.ready #rightzonearab{ right:-100%; background:rgba(0, 0, 0, 0.8); } #bigloading_zonearab.ready .loading_zonearab{ opacity:0; } #bigloading_zonearab.ready{ background: rgba(255,255,255,0); visibility: hidden; }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $("").fadeOut("slow"); setTimeout(function () { $("#tahmil-zonearab").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="tahmil-zonearab" class="ready"> <div class="loading_zonearab"> <div class="loading_zonearab-circle loading_zonearab-row1 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row2 loading_zonearab-col2"></div> <div class="loading_zonearab-circle loading_zonearab-row2 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row2 loading_zonearab-col4"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col1"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col2"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col4"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col5"></div> <div class="loading_zonearab-circle loading_zonearab-row4 loading_zonearab-col2"></div> <div class="loading_zonearab-circle loading_zonearab-row4 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row4 loading_zonearab-col4"></div> <div class="loading_zonearab-circle loading_zonearab-row5 loading_zonearab-col3"></div> </div> <div id="leftzonearab"></div> <div id="rightzonearab"></div> </div>
الشكل 12
<style>#load-zonearab{position:fixed;top:0;left:0;right:0;bottom:0;opacity: .95;background:#444;z-index:99999; } .cool-zonearab { position: absolute; top: 50%; left: 50%; width: 80px; height: 60px; margin: -30px 0 0 -40px; } .cool-zonearab .zonearablines { width: 80px; height: 40px; position: absolute; } .cool-zonearab .zonearablines .line { width: 80px; height: 10px; background-color: #fff; position: absolute; clip: rect(0, 0, 20px, 0); } .cool-zonearab .zonearablines .line.line-1 { top: 0; -webkit-animation: slide 2s ease 0s infinite; animation: slide 2s ease 0s infinite; } .cool-zonearab .zonearablines .line.line-2 { top: 15px; -webkit-animation: slide 2s ease 0.25s infinite; animation: slide 2s ease 0.25s infinite; } .cool-zonearab .zonearablines .line.line-3 { top: 30px; -webkit-animation: slide 2s ease 0.5s infinite; animation: slide 2s ease 0.5s infinite; } .cool-zonearab .loading-zonearab { position: absolute; top: 50px; text-align: center; width: 100%; color: #fff; font-size: 13px; height: 10px; -webkit-animation: fade 1s ease 0s infinite; animation: fade 1s ease 0s infinite; font-weight: bold; } @-webkit-keyframes slide { 0% { clip: rect(0, 0, 20px, 0); } 30% { clip: rect(0, 80px, 20px, 0); } 50% { clip: rect(0, 80px, 20px, 0); } 80% { clip: rect(0, 80px, 20px, 80px); } 100% { clip: rect(0, 80px, 20px, 80px); } } @keyframes slide { 0% { clip: rect(0, 0, 20px, 0); } 30% { clip: rect(0, 80px, 20px, 0); } 50% { clip: rect(0, 80px, 20px, 0); } 80% { clip: rect(0, 80px, 20px, 80px); } 100% { clip: rect(0, 80px, 20px, 80px); } } @-webkit-keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }</style><script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".cool-zonearab").fadeOut("slow"); setTimeout(function () { $("#load-zonearab").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='load-zonearab'><div class='cool-zonearab'><div class='zonearablines'><div class='line line-1'></div><div class='line line-2'></div><div class='line line-3'></div></div><div class='loading-zonearab'>جاري التحميل</div></div></div>
الشكل 13
<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-cube-grid { width: 40px; height: 40px; text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; } .zonearab-cube-grid .sk--zonearabcube { width: 33%; height: 33%; background-color: #fff; float: left; -webkit-animation: sk--zonearabcubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk--zonearabcubeGridScaleDelay 1.3s infinite ease-in-out; } .zonearab-cube-grid .sk--zonearabcube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .zonearab-cube-grid .sk--zonearabcube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .zonearab-cube-grid .sk--zonearabcube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .zonearab-cube-grid .sk--zonearabcube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .zonearab-cube-grid .sk--zonearabcube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .zonearab-cube-grid .sk--zonearabcube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .zonearab-cube-grid .sk--zonearabcube7 { -webkit-animation-delay: 0s; animation-delay: 0s; } .zonearab-cube-grid .sk--zonearabcube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .zonearab-cube-grid .sk--zonearabcube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes sk--zonearabcubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk--zonearabcubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-cube-grid").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="zonearab-cube-grid"> <div class="sk--zonearabcube sk--zonearabcube1"></div> <div class="sk--zonearabcube sk--zonearabcube2"></div> <div class="sk--zonearabcube sk--zonearabcube3"></div> <div class="sk--zonearabcube sk--zonearabcube4"></div> <div class="sk--zonearabcube sk--zonearabcube5"></div> <div class="sk--zonearabcube sk--zonearabcube6"></div> <div class="sk--zonearabcube sk--zonearabcube7"></div> <div class="sk--zonearabcube sk--zonearabcube8"></div> <div class="sk--zonearabcube sk--zonearabcube9"></div></div></div>
لوضع Preloader مخصص:
ابحث عن ]]></b:skin>
ثم ضع الكود التالي فوقه:
.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('######') 50% 50% no-repeat rgb(249,249,249);
مكان ###### ضع رابط الصورة التي تريدها أن تكون Preloader لمدونتك شرط أن تكون بصيغة gif .
ثم ابحث عن <body>
وضع الكود التالي تحته:
<div class="loader"></div>
ثم ابحث عن </head>
وضع الكود التالي فوقه:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">$(window).load(function() { $(".loader").fadeOut("slow");})</script>
ملاحظة هامة: في بعض المدونات ستجد هذا الكود من الخطوة السابقة موجود في المدونة فلا تضفه :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
نتمنى أن يكون هذا الدرس قد نال على اعجابكم.
0 التعليقات
