انشاء جاري التحميل لمدونة بلوجر عند تحميل الصفحة بشكل جذاب ويُنظر إلى موقع الويب الذي يستغرق تحميله أكثر من ثانيتين أو ثلاث ثوانٍ على أنه "بطيء جدًا". لحسن الحظ ، هناك طريقة لتجاوز هذا الذعر مؤقتًا وإبقاء المستخدمين على الموقع لفترة كافية لتحميل الأشياء. أنا أتحدث عن الرسوم المتحركة للتحميل المنومة تمامًا في هذا المنشور ، سننظر في ماهية الرسوم المتحركة للتحميل بالضبط ، والغرض منها ، وكيفية إضافة واحدة إلى أي موقع blogger بما في ذلك مواقع Divi الخاصة بك. ما هي الرسوم المتحركة للتحميل؟ الرسوم المتحركة للتحميل ، والتي تسمى أيضًا التحميل المسبق ، هي
رسم متحرك ملفت للنظر يظهر على موقع ويب لفترة كافية لتحميل وجميع العناصر. بعض الرسوم المتحركة التي يتم تحميلها قصيرة ولا تحتاج إلى لفت انتباه المستخدم لفترة طويلة جدًا. ولكن في بعض الحالات ، إذا كان الموقع كبيرًا جدًا ، فيجب أن تكون الرسوم المتحركة للتحميل جذابة حقًا للمستخدم حتى يتمكن من الاستمرار إذا كنت موجودًا لفترة كافية فأنت تعلم أن تحميل الرسوم المتحركة قد ظهر منذ التسعينيات. حتى في بداية عصر الإنترنت ، كان لدينا تحميل الرسوم المتحركة. بالطبع في ذلك الوقت ، كان بإمكانهم الاستمرار لفترة أطول بكثير مما هم عليه الآن. أيضًا ، تعلمنا كيفية جعلها أكثر إمتاعًا للمستخدم دون الشعور بالملل والإبحار بعيدًا. التعرف على تحميل الرسوم المتحركة النمط الأكثر شيوعًا لتحميل الرسوم المتحركة هو الدائرة الدوارة. لا ينبغي الخلط بينه وبين "قوس قزح دائرة الموت" من أجهزة كمبيوتر Apple
انتقل أولاً إلى HTML ووضع الكود قبل العلامة </body>
<div id="loader-dabourphone"><div class="dabourphone-spinner"><div class="dabourphone-spinner-inner"></div></div></div><script type="text/javascript">$(window).load(function () {setTimeout(function () {$(".dabourphone-spinner").fadeOut("slow");setTimeout(function () {$("#loader-dabourphone").fadeOut("slow")}, 1000)}, 1000)});</script> <style>#loader-dabourphone{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.dabourphone-spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.dabourphone-spinner,.dabourphone-spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.dabourphone-spinner{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}.dabourphone-spinner-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>
تحتوي الرسوم المتحركة لتحميل الدائرة الدوارة على حركة متدرجة متداخلة. كانت أول آلات التحميل المسبق للغزل تحتوي على الكثير من الإصدارات المختلفة ، من الزهور ، إلى الدائرة إلى رقاقات الثلج وحتى الغزل يانغ. في الوقت الحاضر ، أصبحت الرسوم المتحركة للتحميل الدوارة أكثر ديناميكية وأجمل في النظر إليها. لا تعمل الرسوم المتحركة ذات التحميل الدوراني إلا إذا كان وقت الانتظار قصيرًا. أكثر من 5 ثوان هو بالفعل الكثير. هذا عندما يحتاج المطورون إلى استخدام المزيد من أدوات التحميل المسبق الإبداعية. ستحافظ الرسوم المتحركة الممتعة والمسلية على تحميل المستخدم على الموقع بغض النظر عن المدة التي يستغرقها ذلك. التعرف على تحميل الرسوم المتحركة
انتقل أولاً إلى HTML ووضع الكود قبل العلامة </body>
<div id='dabourphone-loader'><div class="dabourphone-wrap"><div class="bg"><div class="dabourphone-loading"> <span class="title">مرحبا بكم في موقع بودي المعلويات سنقوم بتوفير لكم مجموعه كبيرة من افضل برامج الكمبيوتر 2022 ...</span><span class="text"><data:blog.title/></span></div></div></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(".dabourphone-wrap").fadeOut("slow");setTimeout(function () {$("#dabourphone-loader").fadeOut("slow")}, 1000)}, 1000)});</script> <style>#dabourphone-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-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 bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{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}}.dabourphone-wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 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}.dabourphone-loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.dabourphone-loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.dabourphone-loading 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}.dabourphone-loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.dabourphone-loading 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>
النمط الأكثر شيوعًا لتحميل الرسوم المتحركة هو الدائرة الدوارة. لا ينبغي الخلط بينه وبين "قوس قزح دائرة الموت" من أجهزة كمبيوتر Apple. تحتوي الرسوم المتحركة لتحميل الدائرة الدوارة على حركة متدرجة متداخلة. كانت أول آلات التحميل المسبق للغزل تحتوي على الكثير من الإصدارات المختلفة ، من الزهور ، إلى الدائرة إلى رقاقات الثلج وحتى الغزل يانغ. في الوقت الحاضر أصبحت الرسوم المتحركة للتحميل الدوارة أكثر ديناميكية وأجمل في النظر إليها. لا تعمل الرسوم المتحركة ذات التحميل الدوراني إلا إذا كان وقت الانتظار قصيرًا. أكثر من 5 ثوان هو بالفعل الكثير. هذا عندما يحتاج المطورون إلى استخدام المزيد من أدوات التحميل المسبق الإبداعية. ستحافظ الرسوم المتحركة الممتعة والمسلية على تحميل المستخدم على الموقع بغض النظر عن المدة التي يستغرقها ذلك
انتقل أولاً إلى HTML ووضع الكود قبل العلامة </body>
<div id='loader-dabourphone'><div class='preload-dabourphone'><div class='ball-db'></div><div class='ball-db'></div><div class='ball-db'></div></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () { $(".preload-dabourphone").fadeOut("slow");setTimeout(function () {$("#loader-dabourphone").fadeOut("slow")}, 1000)}, 1000)});</script> <style> #loader-dabourphone {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #16A085;z-index: 1000} .preload-dabourphone {width: 300px;height: 300px;position: absolute;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;} .preload-dabourphone div {position: absolute;width: 21px;height: 21px;border-radius: 10.5px;background: #1BBC9B;margin-top: 150px;margin-left: 150px;animation: juggle 2.1s linear infinite;} .preload-dabourphone div:nth-child(1) {animation-delay: -0.7s;} .preload-dabourphone div:nth-child(2) {animation-delay: -1.4s;} @keyframes juggle { 0% {transform: translateX(0px) translateY(0px);} 12.5% {transform: translateX(25px) translateY(-55px) scale(1.1);background: #36D7B7;} 25% {transform: translateX(50px) translateY(0px);animation-timing-function: ease-out; } 37.5% {transform: translateX(25px) translateY(55px);} 50% {transform: translateX(0px) translateY(0px);} 62.5% {transform: translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function: ease-in; } 75% {transform: translateX(-50px) translateY(0px);animation-timing-function: ease-out;} 87.5% {transform: translateX(-25px) translateY(55px); } 100% {transform: translateX(0px) translateY(0px);} } </style>
انتقل أولاً إلى HTML ووضع الكود قبل العلامة </body>
<div id='loader-dabourphone'><div class="spinner-dabourphone"></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(".spinner-dabourphone").fadeOut("slow");setTimeout(function () {$("#loader-dabourphone").fadeOut("slow")}, 1000)}, 1000)});</script> <style>#loader-dabourphone{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner-dabourphone{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-dabourphone-wiggle 1.2s infinite}@keyframes spinner-dabourphone-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner-dabourphone:before,.spinner-dabourphone:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-dabourphone-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-dabourphone-fade 1.2s linear infinite}.spinner-dabourphone:before{border-top-color:#66e5ff}.spinner-dabourphone:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-dabourphone-spin{100%{transform:rotate(360deg)}}@keyframes spinner-dabourphone-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>
انتقل أولاً إلى HTML ووضع الكود قبل العلامة </body>
<div id='loader-dabourphone'><div class='balls-dabourphone'></div><div class='balls-dabourphone'></div><div class='balls-dabourphone'></div><div class='balls-dabourphone'></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(".balls-dabourphone").fadeOut("slow");setTimeout(function () {$("#loader-dabourphone").fadeOut("slow")}, 1000)}, 1000)});</script> <style>#loader-dabourphone{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls-dabourphone{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls-dabourphone:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls-dabourphone:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls-dabourphone:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls-dabourphone:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>
انتقل أولاً إلى HTML ووضع الكود قبل العلامة </body>
<div id='loader-dabourphone'><div class='spinnery-dabourphone'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></div><script type='text/javascript'>$(window).load(function () {setTimeout(function () {$(".spinnery-dabourphone").fadeOut("slow");setTimeout(function () {$("#loader-dabourphone").fadeOut("slow")}, 1000)}, 1000)});</script> <style>#loader-dabourphone{width:100%;height:100%;overflow:hidden;margin:auto;position:fixed;top:0;left:0;bottom:0;right:0;z-index:99999;background-color:#2980B9}.spinnery-dabourphone{margin:auto;height:13px;text-align:center;position:absolute;top:0;left:0;bottom:0;right:0}.spinnery-dabourphone > div{width:18px;height:18px;background-color:#fff;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinnery-dabourphone .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinnery-dabourphone .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1.0)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);transform:scale(1.0)}}</style>
انشاء جاري التحميل لمدونة بلوجر عند تحميل الصفحة بشكل جذاب ويُنظر إلى موقع الويب الذي يستغرق تحميله أكثر من ثانيتين
أو ثلاث ثوانٍ على أنه "بطيء جدًا". لحسن الحظ ، هناك طريقة لتجاوز هذا الذعر مؤقتًا وإبقاء المستخدمين على الموقع لفترة كافية لتحميل الأشياء. أنا أتحدث عن الرسوم المتحركة للتحميل
![من أفضل قوالب المدونات المستجيبة المجانية لعام [2022] %100](https://blogger.googleusercontent.com/img/a/AVvXsEgwfIQAlrKTVlqOLUqablLEPEHQxi9KmNUsgxS0vtP6SKlnTYy8yOjZchjyMlhxkv0nP_ifY4nAJe5ri15VtEhltpkFhY5tOEFNjh0sBOreuVzS40nLGqnDWQmc1kTxiDboins8--uQgeNdbYsaupSzr_xg1eX92YaHdFTnsV3PAZlulnhw5BRlx_2r9Q=w680)
0 تعليقات