[Jquery] Simple Loading Bar

5년 전

[Jquery] Simple Loading Bar

In this tutorial, I want to show you how to make your own Loading Bar step by step.



1. Where I can find loading bar template

a. Find a image with loading animation

You can use my image: 

b. Find a Html, Css file that create loading bar

You can get one here: http://cssload.net/en/spinners

Step 1: Choose a loading style

Step 2: Click get code

Then it'll show you both HTML and CSS code.

2. What about my main html template

Just put your loading bar code inside a div have a class named "preload"

<div class="preload">
  Your loading bar code will be here....

For Image:

<div class="preload">
  <img src="IMAGE FILE PATH"/>

For Html, Css

<div class="preload">
  COPY HTML, CSS code from last step and put it here

3. How to show and hide loading bar

If you want to show Loading Bar -> $('.preload').fadeIn();

If you want to hide Loading Bar -> $('.preload').fadeOut();

Feel free to comment any questions and I'll reply you as soon as possible.... :D 

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  trending

This post received a 3.9% upvote from @randowhale thanks to @vominhquoc! For more information, click here!

@vominhquoc got you a $0.43 @minnowbooster upgoat, nice!
@vominhquoc got you a $0.43 @minnowbooster upgoat, nice! (Image: pixabay.com)

Want a boost? Click here to read more!

You can ib fb m can not