how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
Beautiful loader using css3
Display a beautiful loader on your web page while page is loading. You need to show a loader while background process running. If your web page have long data or many images, then you have to show a beautiful loader. You can create loader using css3 and JS without using gif image. Now follow the step.
Step1
First add the fontawesome CDN in your page.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Then create a div with a id overlay .
<div id="overlay"></div>
Add the following css inside style tag.
<style type="text/css"> #overlay{ position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; cursor: pointer; } </style>
Step 2
Now add the font awesome spinner icon inside the overlay div.
<div id="overlay"> <div class="lodar"> <i class="fa fa-spinner color-white-spin fa-spin" aria-hidden="true"></i> Loading please wait. </div> </div>
Now add the spinner css
<style type="text/css"> #overlay .lodar{ color:#fff; font-size: 40px; left:39%; top:50%; position: absolute; } </style>
That’s all.
Display loader while page is loading
If you want to display this beautiful page loader on your web page then follow this example code and attach this CDN link.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).load(function() { $("#overlay").fadeOut("slow"); }); }); </script>
Try with this example code:
Full example code is here, copy these example code and paste in a html page.
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <style type="text/css"> #overlay{ position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; cursor: pointer; } #overlay .lodar{ color:#fff; font-size: 40px; left:39%; top:50%; position: absolute; } </style> </head> <body> <div id="overlay"> <div class="lodar"> <i class="fa fa-spinner color-white-spin fa-spin" aria-hidden="true"></i> Loading please wait. </div> </div> <div class="container"> <div class="row"> <div class="col-sm-12"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </div> <div class="row"> <div class="col-sm-4"> <h3>Column One</h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="col-sm-4"> <h3>Column Two</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="col-sm-4"> <h3>Column Three</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).load(function() { $("#overlay").fadeOut("slow"); }); }); </script> </body> </html>
Related posts