CSS Loading Effect

Submitted by: 
Language: 
Visitors have accessed this post 585 times.

CSS Loading Effect

In this article, we are going to learn How To Make Loading Effect using CSS. Some programmers or developers they create loading effect using the Flash Software, but as of now they already using the CSS for making the loading effect or any animation even they did not use the Flash Software.

For this simple article that we have today, you can change any variant color that you want for the loading effect. You can edit the source code of the CSS style after you download the full source code. CSS is now powerful in terms of animation for your project because you can customize it easily and you can create a more attractive design to catch the attention of the user.

You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

#demo_wrapper {
width:600px;
height:75px;
background:#F0F0F0;
border: 5px solid #e4e5e5;
}

.demo_button {
width:175px;
cursor:pointer;
font-size:20px;
color:azure;
font-weight:bold;
border-radius:34px;
font-family:cursive;
background:-webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%);
border:5px solid #d0d0d0;
float: right;
margin-top: -35px;
margin-right: 220px;
height: 50px;
}

.demo_button:hover {
width:175px;
cursor:pointer;
font-size:20px;
font-weight:bold;
color:blue;
border-radius:34px;
font-family:cursive;
background:azure;
border:5px solid #d0d0d0;
height: 50px;
}


⚙ Live Demo

Creating Markup

This simple HTML source code consists one table and the DIV element for the loading effect. Kindly copy and paste this simple source code to your BODY tag of your page.

  1. <tr>
  2. <td>
  3. <div class="loading_style">
  4. <span></span>
  5. <span></span>
  6. <span></span>
  7. <span></span>
  8. <span></span>
  9. </div>
  10. </td>
  11. <td width="50">
  12. </td>
  13. <td>
  14. <div class="loading_style2">
  15. <span></span>
  16. <span></span>
  17. <span></span>
  18. <span></span>
  19. <span></span>
  20. </div>
  21. </td>
  22. <td width="50">
  23. </td>
  24. <td>
  25. <div class="loading_style3">
  26. <span></span>
  27. <span></span>
  28. <span></span>
  29. <span></span>
  30. <span></span>
  31. </div>
  32. </td>
  33. </tr>
  34. </table>

External Link

This external link consists all the CSS style tag to create the loading effect on your page. Copy and paste this to your HEAD tag of your page.

  1. <link rel="stylesheet" type="text/css" href="style.css">
  2. <link rel="stylesheet" type="text/css" href="style2.css">
  3. <link rel="stylesheet" type="text/css" href="style3.css">

Result

#demo_wrapper {
width:600px;
height:75px;
background:#F0F0F0;
border: 5px solid #e4e5e5;
}

.demo_button {
width:175px;
cursor:pointer;
font-size:20px;
color:azure;
font-weight:bold;
border-radius:34px;
font-family:cursive;
background:-webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%);
border:5px solid #d0d0d0;
float: right;
margin-top: -35px;
margin-right: 220px;
height: 50px;
}

.demo_button:hover {
width:175px;
cursor:pointer;
font-size:20px;
font-weight:bold;
color:blue;
border-radius:34px;
font-family:cursive;
background:azure;
border:5px solid #d0d0d0;
height: 50px;
}


⚙ Live Demo

Kindly click the "Download Code" button below for full source code. Thank you very much.

Hope that this article will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.