Adding Loading effect to Your website in easy way

Its a great idea to show a cool animated image until your website is loading? Of Course, it will improve your site’s user experience.

Almost all the latest themes on Themeforest come with preloaders. Adding preloader will display a loading animation until the page has been completely loaded.

In this tutorial, I’ll show you the simplest way for adding preloaders to a website using only jQuery and CSS.

Steps to create loader for your website

1. Add a loading DIV after the body div starts.

<div class="loading">
  <div class="loader"></div>
</div>

2. Add some CSS to show the loading div on fullscreen.

.loading{
  position: fixed;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
}

3. Add some CSS to show the loading effter to loader div.

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
@keyframes spin {
v
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

4. adding jQuery to your webpage at the end of the before closing Body tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

5. adding jQuery fade out the preloader animation once the page has been completely loaded.

<script type="text/javascript">
  $(window).load(function() {
    $(".loading").fadeOut("slow");
  });
</script>

Demo here: Demo

Download from: Download

When designing a website, select boxes are one of the most worst problem to style them with our imagination.
In this tutorial we learn how to style select box using only CSS and style it witch we want.
Select Box Custom CSS style

Add Select tag and options you want to add in HTML like Below

<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>

After adding HTML you have to add below CSS


.styling select::-ms-expand {
display: none;
}
.styling select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #1038ef;
border-radius: 35px;
color: #333;
font-size: 16px;
height: 35px;
padding-left: 10px;
width: 200px;
background-image: url(arrow.jpg);
background-position: right;
background-repeat: no-repeat;
}

In this tutorial we just remove arrow of the select box and add image of arrow in background.

This below CSS code is used to remove arrow from Internet Explorer browser

.styling select::-ms-expand {
display: none;
}

This below CSS code is used to remove arrow from Chrome and Safari browser

select{
-webkit-appearance: none;
}

This below CSS code is used to remove arrow from Firefox browser

select{
-moz-appearance: none;
}

This below CSS code is default code to remove the arrow

select{
appearance: none;
}

Demo here: Demo

Download from: Download