পৃষ্ঠা লোডিং শেষ না হওয়া পর্যন্ত পৃষ্ঠা লোডিং ডিভিটি কীভাবে দেখানো যায়?

148

আমাদের ওয়েবসাইটে আমার একটি বিভাগ রয়েছে যা কিছু নিবিড় কল করার সাথে সাথে এটি ধীরে ধীরে লোড হয়।

divপৃষ্ঠা নিজেই প্রস্তুত করার সময় আমি কীভাবে "লোডিং" এর অনুরূপ কিছু বলতে পারি এবং তারপরে সবকিছু প্রস্তুত হওয়ার পরে নিখোঁজ হতে পারি তার কোনও ধারণা ?

javascript  jquery  html  dom  loader 
— শাদি আলমোসরি
সূত্র

উত্তর:

215

আমার এটির দরকার ছিল এবং কিছু গবেষণার পরে আমি এটি নিয়ে এসেছি ( jQuery প্রয়োজনীয়):

প্রথম, <body>ট্যাগের ঠিক পরে এটি যুক্ত করুন:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

তারপরে আপনার সিএসএসে ডিভ এবং চিত্রের জন্য স্টাইল শ্রেণি যুক্ত করুন:

#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

তারপরে, আপনার জাভাস্ক্রিপ্টটি আপনার পৃষ্ঠায় যুক্ত করুন (অবশ্যই আপনার পৃষ্ঠার শেষে, আপনার সমাপনী </body>ট্যাগের আগে অবশ্যই):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

শেষ অবধি, background-colourশৈলী শ্রেণীর সাথে লোডিং চিত্রের এবং লোডিং ডিভের অবস্থানটি সামঞ্জস্য করুন ।

এটি ঠিক কাজ করা উচিত। তবে অবশ্যই আপনার ajax-loader.gifকোথাও কোথাও থাকতে হবে। ফ্রিবিজ এখানে । (ডান ক্লিক করুন> চিত্রটি যেমন সংরক্ষণ করুন ...)

— mehyaa
সূত্র
5
অন্য পৃষ্ঠায় পুনর্নির্দেশের সময়, এটি একই পৃষ্ঠাতে থাকে এবং হঠাৎ পছন্দসই পৃষ্ঠাটি প্রদর্শিত হয়, তারপরে: পূর্ববর্তী পৃষ্ঠাতে পূর্ববর্তী পৃষ্ঠাতে লোডিং ফলক পাশাপাশি লক্ষ্য পৃষ্ঠাটি প্রদর্শন করুন। উইন্ডো.অনফফরউনলোড = ফাংশন () {$ ('# লোডিং') show শো (); }
— সামেহ ডেবিস
2
+1 এটি সংক্ষিপ্ত, মিষ্টি এবং পরিষ্কার, আমি এটি পছন্দ করি। তবে আমি সেই ডিভটি অপসারণ করব এবং কেবল <img> (;
— ফ্রান্সিসকো প্রেসেনসিয়া
3
ইমেজটি লোড হতে কিছুক্ষণ সময় লাগছে, ততক্ষণ পৃষ্ঠাটি ইতিমধ্যে লোড না হওয়া পর্যন্ত
— এলিয়োর
1
$('#loading').hide();প্রতিটি পৃষ্ঠার বোঝা যুক্ত করা এড়াতে আমার উত্তর দেখুন ।
— rybo111
এই অ্যাজাক্স কোডটি কার্যকর এবং দ্রুত কাজ করবে: স্মার্টফোন
— মে
36

এই স্ক্রিপ্টটি একটি ডিভ যুক্ত করবে যা পৃষ্ঠাটি লোড হওয়ার সাথে সাথে পুরো উইন্ডোটি জুড়ে। এটি স্বয়ংক্রিয়ভাবে কোনও সিএসএস-কেবল লোডিং স্পিনার প্রদর্শন করবে। উইন্ডোটি (দস্তাবেজ নয়) লোড হওয়া শেষ না হওয়া পর্যন্ত এটি অপেক্ষা করবে, তারপরে এটি একটি extraচ্ছিক অতিরিক্ত কয়েক সেকেন্ড অপেক্ষা করবে।

  • JQuery 3 এর সাথে কাজ করে (এটিতে একটি নতুন উইন্ডো লোড ইভেন্ট রয়েছে)
  • কোনও চিত্রের প্রয়োজন নেই তবে এটি যুক্ত করা সহজ
  • আরও ব্র্যান্ডিং বা নির্দেশাবলীর জন্য বিলম্ব পরিবর্তন করুন
  • শুধুমাত্র নির্ভরতা jQuery হয়।

Https://projects.lukehaas.me/css-loaders থেকে সিএসএস লোডার কোড

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}
        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.

  <ul>
    <li>Works with jQuery 3, which has a new window load event</li>
    <li>No image needed but it's easy to add one</li>
    <li>Change the delay for branding or instructions</li>
    <li>Only dependency is jQuery.</li>
  </ul>

Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders

<!-- Place the script below at the bottom of the body -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
স্নিপেট প্রসারিত করুন

— ভিক্টর স্টডার্ডার্ড
সূত্র
ইমাম ট্যাগগুলির জন্য এটি কীভাবে যুক্ত করবেন?
— মানো এম
1
$(window).on("load", handler)চিত্র, স্ক্রিপ্ট, এমনকি আইফ্রেম সহ সমস্ত ডিওএম অবজেক্ট লোড করা শেষ হলে @ ম্যানোম অগ্নিসংযোগ করে। আপনি যদি কোনও নির্দিষ্ট চিত্র লোড হওয়ার জন্য অপেক্ষা করতে চান তবে ব্যবহার করুন$('#imageId').on("load", handler)
— ভিক্টর স্টোডার্ড
এটি আমার জন্য কেবল তখনই কাজ করছে যখন পৃষ্ঠাটি প্রথম লোড হয়, যখন ব্রাউজার / ট্যাবটি খোলা বা সতেজ করা হয়। যাইহোক, পৃষ্ঠাটি খোলার পরে লোড হওয়ার সময় এটি প্রদর্শিত হবে না। আমার একটি পৃষ্ঠা টোগল সহ বিভিন্ন সামগ্রী দেখায় এবং সামগ্রীগুলির মধ্যে টগল করার সময় এটি লোড হতে কিছুটা সময় নেয়। এমন কোনও উপায় আছে যার মাধ্যমে আমি এই প্রথম কোডটি প্রথমবার পৃষ্ঠাটি খোলার সময় কেবল লোড করার জন্যই খাপ খাইয়ে নিতে পারিনি তবে প্রতিবারই এটি লোড হতে কিছুটা সময় নিচ্ছে?
— জোহাত
1
প্রতিস্থাপন @Joehat $( "#loadingDiv" ).remove();সঙ্গে $( "#loadingDiv" ).hide();যোগ $( "#loadingDiv" ).show();সামনে setTimeout(removeLoader, 2000);। পৃষ্ঠাটি আরও লাইটওয়েট করার জন্য আমার ডিভটি সরানো হয়েছিল তবে এই ফিক্সটি এটি পুনরায় ব্যবহারযোগ্য করে তোলে।
— ভিক্টর Stoddard
আমি আপনার কোড চেষ্টা করেছিলাম .. এটি আশ্চর্যজনক। আমি যখন আমার পৃষ্ঠাতে কল করি তখন এটি একটি ফাঁকা পৃষ্ঠা দেখায় (এটি সামগ্রী লোড করে)। কয়েক সেকেন্ড পরে (আমি মনে করি সামগ্রীগুলি লোড হয়েছে) এটি পুরো পৃষ্ঠাটি দেখানোর চেয়ে 2 সেকেন্ডের জন্য লোডারটি দেখায়। : আপনি দেখে নিতে পারেন criferrara.it/crigest/toshiba
— sunlight76
28 

window.onload = function(){ document.getElementById("loading").style.display = "none" }
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} 
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>
স্নিপেট প্রসারিত করুন

জেএসে তৈরি করা সবচেয়ে সহজ ফেডআউট প্রভাব সহ পৃষ্ঠাটি লোড করা চিত্র :

— দারিউস জে
সূত্র
9

আমার এটির নীচে আরও সহজ সমাধান রয়েছে যা আমার পক্ষে নিখুঁতভাবে কাজ করেছিল।

সবার আগে, নাম লকন ক্লাস সহ একটি সিএসএস তৈরি করুন যা নিচের মতো দেখানো হয়েছে জিআইএফ লোড করার পাশাপাশি স্বচ্ছ ওভারলে

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

এখন এই শ্রেণীর সাথে আমাদের ডিভি তৈরি করা দরকার যা পৃষ্ঠাটি যখনই লোড হচ্ছে তখন ওভারলে হিসাবে পুরো পৃষ্ঠাটি কভার করে

<div id="coverScreen"  class="LockOn">
</div>

এখনই পৃষ্ঠাটি প্রস্তুত হওয়ার সাথে সাথে আমাদের এই কভার স্ক্রিনটি আড়াল করা দরকার এবং যাতে পৃষ্ঠাটি প্রস্তুত না হওয়া পর্যন্ত আমরা কোনও ইভেন্টকে ক্লিক / গুলি চালানো থেকে বিরত রাখতে পারি

$(window).on('load', function () {
$("#coverScreen").hide();
});

পৃষ্ঠাটি লোড হওয়ার পরে উপরের সমাধানটি ঠিক থাকবে।

পৃষ্ঠাটি লোড হওয়ার পরে এখন প্রশ্নটি হচ্ছে, যখনই আমরা একটি বোতাম বা কোনও ইভেন্ট যা অনেক বেশি সময় নেবে ক্লিক করি তখন আমাদের ক্লায়েন্ট ক্লিক ইভেন্টে এটি নীচে প্রদর্শিত হিসাবে দেখাতে হবে

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

এর অর্থ যখন আমরা এই মুদ্রণ বোতামটি ক্লিক করি (যা রিপোর্ট দিতে দীর্ঘ সময় নিতে পারে) এটি আমাদের কভার স্ক্রিনটি জিআইএফ দিয়ে দেখায় যা এইফলাফল দেয় এবং পৃষ্ঠাটি লোড ফাংশনে উইন্ডোজগুলির উপরে প্রস্তুত হয়ে গেলে আগুন জ্বলে উঠবে এবং যা কভার স্ক্রিনটি আড়াল করে একবারে স্ক্রিনটি সম্পূর্ণ লোড হয়ে যায়।

— রিনয় অশোকন
সূত্র
1
গ্রেট! এটির পুরো পর্দার অবস্থান তৈরি করতে কেবল এগুলি ব্যবহার করতে হয়েছিল: স্থির; প্রস্থ: 100vw; উচ্চতা: 100vh;
— বোটাং
6

সামগ্রীতে ডিফল্ট ডিফল্ট display:noneএবং তারপরে একটি ইভেন্ট হ্যান্ডলার থাকে যা display:blockএটি সম্পূর্ণরূপে লোড হওয়ার পরে সেট করে বা অনুরূপ করে দেয়। তারপরে একটি ডিভ থাকে যা এতে display:block"লোডিং" দিয়ে সেট করা থাকে এবং এটিকে display:noneআগের মতো ইভেন্ট হ্যান্ডলারে সেট করে ।

— অ্যাম্বার
সূত্র
1
আপনি কোন অনুষ্ঠানটি এটি করতে ব্যবহার করবেন? জাভাস্ক্রিপ্ট পৃষ্ঠা লোড? নাকি এর চেয়ে ভাল জায়গা আছে?
— মাইলস
পৃষ্ঠার জন্য অন্য জেএস সেটআপ স্টাফ করছে কিনা তা নির্ভর করে - যদি তাই হয় তবে এটি শেষ হয়ে গেলে এটি কল করুন, যদি না হয়, তবে ডকুমেন্ট অনলোডটি ঠিকঠাক কাজ করে।
— অ্যাম্বার
2

আচ্ছা, এটি কীভাবে আপনি 'নিবিড় কল'-এ প্রয়োজনীয় উপাদানগুলি লোড করছেন তার উপর মূলত নির্ভর করে, আমার প্রাথমিক চিন্তাটি আপনি এজ্যাক্সের মাধ্যমে এই লোডগুলি করছেন। যদি এটি হয় তবে আপনি 'ফোরসেন্ড' বিকল্পটি ব্যবহার করতে পারেন এবং এজেজ্যাক কলটি করতে পারেন:

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){           <---- use this option here
     $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
     $('.select_element_you_want_to_load_into').html(msg);
  }
});

সম্পাদনা আমি দেখতে পাচ্ছি, সেক্ষেত্রে 'display:block'/'display:none'উপরের বিকল্পগুলির একটিতে $(document).ready(...)jQuery থেকে সম্মতিতে ব্যবহার করা সম্ভবত যাওয়ার উপায়। $(document).ready()সম্পূর্ণ নথি গঠন জন্য ফাংশন অপেক্ষা করছে চালানোর আগে লোড করা ( কিন্তু এটি লোড সব মিডিয়া জন্য অপেক্ষা করে না )। আপনি এই জাতীয় কিছু করবেন:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
— btelles
সূত্র
দুর্ভাগ্যক্রমে এটি আজাক্সের মাধ্যমে নয়, এটি পিএইচপি স্ক্রিপ্টের জন্য ডাটাবেস থেকে ডেটা প্রস্তুত করার জন্য অপেক্ষা করছে, তাই এইচটিএমএল উপাদানগুলির কিছু লোড হয় তারপরে ব্রাউজারটি বাকী লোড করার আগে ডেটা সারণীর জন্য অপেক্ষা করে। পৃষ্ঠাটি স্থবির হয়ে আছে বলে মনে হচ্ছে, তাই সেখানে "কিছু ঘটছে" এবং ব্যবহারকারীকে দূরে সরিয়ে না দেওয়ার জন্য সেখানে কিছু প্রদর্শন করা দরকার ...
— শাদি আলমোসরি
এফওয়াইআই: ওয়েবের মূলনীতি (এজাক্স ছাড়াই) কোনও সার্ভার একটি সম্পূর্ণ পৃষ্ঠা সার্ভারসাইড রেন্ডার করে এবং সমাপ্তির পরে এটি এই ফলাফলটি (এইচটিএমএল) ব্রাউজারে প্রেরণ করে। যদি পৃষ্ঠার রেন্ডারিং মাঝখানে কোথাও থামানো হয় (আপনি পৃষ্ঠাটি ব্রাউজারে প্রদর্শিত হতে পারেন) তবে এটি পিএইচপি স্ক্রিপ্ট হতে পারে না, কারণ পিএইচপি কেবল সার্ভারসাইড চালায়।
— পিটার
যুক্ত হওয়া beforeSendএবং successপ্রতিটি এজ্যাক্স কলটিতে আমার উত্তর দেখুন ।
— rybo111
2

আমার ব্লগ 100 শতাংশ কাজ করবে।

function showLoader()
{
    $(".loader").fadeIn("slow");
}
function hideLoader()
{
    $(".loader").fadeOut("slow");
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
<div class="loader">
স্নিপেট প্রসারিত করুন

— জিতেন্দ্র প্যাটেল
সূত্র
1

<div>এমন একটি উপাদান তৈরি করুন যাতে আপনার লোডিং বার্তা রয়েছে, <div>একটি আইডি দিন এবং তারপরে আপনার সামগ্রী লোড করা শেষ হয়ে গেলে, লুকিয়ে রাখুন <div>:

$("#myElement").css("display", "none");

... বা সাধারণ জাভাস্ক্রিপ্টে:

document.getElementById("myElement").style.display = "none";
— স্টিভ হ্যারিসন
সূত্র
সহজ এবং কাজ সম্পন্ন হয়। একটি পাঠযোগ্যতার দৃষ্টিকোণ থেকে $("#myElement").hide()চোখের উপর সহজ নয় ?
— ব্যবহারকারী 3613932
1

এখানে আমি jQuery ব্যবহার করে শেষ করেছি, যা সমস্ত এজ্যাক্স শুরু / থামাতে পর্যবেক্ষণ করে, তাই আপনাকে প্রতিটি এজাক্স কলটিতে এটি যুক্ত করার দরকার নেই:

$(document).ajaxStart(function(){
    $("#loading").removeClass('hide');
}).ajaxStop(function(){
    $("#loading").addClass('hide');
});

লোডিং ধারক এবং সামগ্রী (বেশিরভাগ মেহের উত্তর থেকে) এর পাশাপাশি সিএসএস, পাশাপাশি একটি hideশ্রেণি:

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 100;
}

.hide{
  display: none;
}

এইচটিএমএল:

<div id="loading" class="hide">
  <div id="loading-content">
    Loading...
  </div>
</div>
— rybo111
সূত্র
সমস্যাটি হ'ল, যদি আমার কাছে একটি ইনপুটটিতে একটি অজ্যাক্স লোড স্বয়ংক্রিয়ভাবে পূর্ণ হয় তবে লোডার উপস্থিত হবে।
— লুকাস
0

@ মেহিয়া উত্তরের ভিত্তিতে, তবে আরও খাটো:

এইচটিএমএল (ঠিক পরে <body>):

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

সিএসএস:

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* 1/2 of the height and width of the actual gif */
  margin: -16px 0 0 -16px;
  z-index: 100;
  }

জাভাস্ক্রিপ্ট (jQuery, যেহেতু আমি ইতিমধ্যে এটি ব্যবহার করছি):

$(window).load(function() {
  $('#loading').remove();
  });
— ফ্রান্সিসকো প্রেজেনসিয়া
সূত্র
1
এটি hide()উপাদানটির চেয়ে remove()এটির চেয়ে ভাল , যাতে আপনি এটি পুনরায় ব্যবহার করতে পারেন।
— rybo111
0

এটি একটি এপিআই কল সহ সিঙ্ক্রোনাইজেশন হবে, যখন এপিআই কলটি ট্রিগার করা হয় তখন লোডারটি প্রদর্শিত হয়। এপিআই কল সফল হলে লোডারটি সরানো হয়। এটি পৃষ্ঠা লোডের জন্য বা একটি এপিআই কল চলাকালীন সময়ে ব্যবহার করা যেতে পারে।

  $.ajax({
    type: 'GET',
    url: url,
    async: true,
    dataType: 'json',
    beforeSend: function (xhr) {
      $( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
      $("html, body").animate( { scrollTop: $(document).height() }, 100);
    },
    success: function (jsonOptions) {
      $('#searching-loader').remove();
      .
      .
    }
  });

সিএসএস

.loader {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #3498db;
  width: 30px;
  height: 30px;
  margin: auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-top: 35px;
  margin-bottom: -35px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
— SuperEye
সূত্র
0

আপনার থিম কাস্টম_থিম.থমে ফাইলটিতে ড্রুপাল জন্য

function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

Html.html.twig ফাইলটিতে মূল কন্টেন্টের লিঙ্কটি স্কিপ করার পরে

{% if preloader %} 
  <div id="test-preloader" >
    <div id="preloader-inner" class="cssload-container">
      <div class="wait-text">{{ 'Please wait...'|t }} </div> 
      <div class="cssload-item cssload-moon"></div>
    </div>
  </div>
{% endif %}

সিএসএস ফাইলে

#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}

.cssload-container .cssload-item {
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 131px;
 height: 131px;
 background-color: #fff;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 }

.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
 }
— প্রদীপ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.