2

Here is my Script to load Pre-loader image

JavaScript:

<script>    
function showDiv() {

  document.getElementById('showme').style.display = "block";
  setTimeout(function() {
    document.getElementById('loadingGif').style.display = "none";
    document.getElementById('showme').style.display = "block";
  },2000);

}

</script>

View:

<div class="form-group alignright">
    <label class="col-sm-12 control-label alignright">Upload CSV</label>
       <div id="showme" style="display:none"><img src="<?php echo base_url()?>images/img.gif"></div>

           <div class="col-sm-12">
              <input type="file" name="filename" size="20" />
              <button type="submit" id="upload" class="btn btn-primary" onclick="showDiv()">Upload</button>
           </div>
       </div>

How can I blur the background,When I load this Pre-loader image.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • The best solution being https://stackoverflow.com/a/32187069/3702797, unfortunately [requiring horrible polyfill](https://github.com/AhsanE/backdrop-polyfill-chrome). – Kaiido Feb 04 '19 at 09:32

3 Answers3

2

Use the Filter css property: filter: blur(8px)

-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
-o-filter: blur(8px);
filter: blur(8px);

Simple example using an image:

How To Create a Blurry Background Image

Browser Support:

Browser Compatibility

IE Support (no basic support):

You could use opacity to fade the background.

David
  • 641
  • 1
  • 8
  • 23
1
<head>
    <script>
        function showDiv() {
            document.getElementById('showme').style.display = "block";
            document.getElementsByClassName('blur')[0].style.filter = "blur(8px)";
        }
    </script>
</head>

<body>
    <div id="showme" style="display:none">
        <img src="image.gif">
    </div>
    <div class="form-group alignright blur">
        <label class="col-sm-12 control-label alignright">Upload CSV</label>
        <div class="col-sm-12">
          <input type="file" name="filename" size="20" />
          <button type="submit" id="upload" class="btn btn-primary" 
              onclick="showDiv()">Upload</button>
        </div>
    </div>
</body>

You can use Filter css property to blur the background

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Shailesh Gehlot
  • 79
  • 9
-2

You can try this:

<style>
  #overlay {
   position: fixed; 
   height: 100%; 
   width: 100%; 
   top:0; 
   left: 0; 
   background-color:#ccc;
   z-index:9999;padding-top: 10px;
 }
</style>

<div id="overlay">Loading...</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
  $('#overlay').fadeOut(500);
</script>
Channeth Khon
  • 3
  • 1