1. Tutorials
  2. Creating an Infinity Loader using HTML and CSS Tutorial

Creating an Infinity Loader using HTML and CSS Tutorial

Submitted by oretnom23 on Thursday, February 23, 2023 - 17:10.

In this tutorial, you can learn how to create a simple Infinity Loader using HTML and CSS. The main purpose of this tutorial is to provide the students and beginners with a reference for understanding how the animated loader is made using CSS only, Here, I will be providing a script that demonstrates the infinity loader using only CSS and HTML.

What is a loader?

In a web application, website, or computer software, the loader or also known as the preloader is what the user sees before the window or the page document has loaded successfully. It is often simple or complex animations that are used to keep visitors entertained while server operations finish processing.

How to Create Infinity Loader?

There are lots of different amazing preloaders design that we can use for our web applications or websites. Infinity Loader Design is one of the common preloaders that is being used for most sites. To create one, we can simply use some HTML elements and add some CSS styles and animation to achieve it.

Here is the following script that demonstrates the creation of a simple Infinity Loader.

HTML

First, we'll need to create the web page for the loader container and elements.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>HTML, CSS, and JS - Infinity Loader</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link href="https://fonts.googleapis.com/css2?family=Mynerve&display=swap" rel="stylesheet">
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  14.     <section>
  15.         <h1 class="text-center"><b>Creating an Infinity Loader using HTML and CSS</b></h1>
  16.         <hr width="50px">
  17.     <!-- Infinity Loader Container -->
  18.         <div class="infitiny-loader">
  19.             <div class="circle">
  20.                 <span></span>
  21.                 <span></span>
  22.             </div>
  23.             <div class="circle">
  24.                 <span></span>
  25.                 <span></span>
  26.             </div>
  27.         </div>
  28.     <!-- End of Infinity Loader Container -->
  29.     </section>
  30. </body>
  31. </html>

Web-Page CSS

Next, let's create the web page design and the infinity symbol.

  1. /*
  2. * Web Page Design
  3. */
  4. :root{
  5.     --mynerve-font:'Mynerve', cursive;
  6.     --light-color:#f9f9f9;
  7.     --dark-color:#20262E;
  8. }
  9. body,
  10. html{
  11.     height: 100%;
  12.     width: 100%;
  13. }
  14. h1{
  15.     font-family: var(--mynerve-font)
  16. }
  17. .text-center{
  18.     text-align: center;
  19. }
  20. html{
  21.     overflow: hidden;
  22. }
  23. body{
  24.     background-color: var(--dark-color);
  25.     color:var(--light-color);
  26.     overflow:auto;
  27.     margin: 0;
  28.     padding: 0;
  29. }
  30. section{
  31.     padding-top: 20vh;
  32.     width: calc(100%);
  33.     display: flex;
  34.     flex-direction: column;
  35.     align-items: center;
  36.     justify-content: center;
  37. }

Here's the result of the script above.

Loader CSS

Lastly, let's create the animation and the design of the infinity loader.

  1. /**
  2. * Infitiy Loader styles
  3. */
  4. .infitiny-loader {
  5.     width: 100%;
  6.     display: flex;
  7.     align-items: center;
  8.     justify-content: center;
  9. }
  10. .circle {
  11.     position: relative;
  12.     height: 100px;
  13.     width: 100px;
  14.     border: 18px solid #2d84ee;
  15.     border-radius: 100px;
  16.     margin: 0 -9px;
  17. }
  18.  
  19. /*
  20. * Span
  21. */
  22. .circle span {
  23.     content: "";
  24.     position: absolute;
  25.     height: 100px;
  26.     width: 100px;
  27.     border: 18px solid transparent;
  28.     border-radius: 100px;
  29.     top: -18px;
  30.     left: -18px;
  31.     transform: rotate(135deg);
  32.     z-index: 99;
  33.     border-top-color: #fff;
  34.     animation: spin 6s cubic-bezier(0, 0, 0, 0) infinite;
  35.     animation-delay: 0s;
  36. }
  37. .circle span:nth-child(2) {
  38.     transform: rotate(135deg);
  39.     border-color: #fff;
  40.     border-top-color: transparent;
  41.     animation: spinn 6s cubic-bezier(0, 0, 0, 0) infinite .75s;
  42. }
  43. .circle:nth-child(2) span:nth-child(1) {
  44.     animation: spin2 6s cubic-bezier(0, 0, 0, 0) infinite 3s;
  45.     transform: rotate(225deg);
  46. }
  47. .circle:nth-child(2) span:nth-child(2) {
  48.     animation: spinn2 6s cubic-bezier(0, 0, 0, 0) infinite 3.75s;
  49.     transform: rotate(225deg);
  50.     border-color: #fff;
  51.     border-top-color: transparent;
  52. }
  53.  
  54. /*
  55. * Animation
  56. */
  57. @keyframes spin {
  58.     0%{
  59.         transform: rotate(135deg);
  60.     }
  61.     50%,100%{
  62.         transform: rotate(495deg);
  63.     }
  64.    
  65. }
  66. @keyframes spinn {
  67.     0%{
  68.         transform: rotate(135deg);
  69.     }
  70.     50%, 100%{
  71.         transform: rotate(495deg);
  72.     }
  73.    
  74. }
  75. @keyframes spin2 {
  76.     0%{
  77.         transform: rotate(225deg);
  78.     }
  79.     50%,100%{
  80.         transform: rotate(-135deg);
  81.     }
  82. }
  83. @keyframes spinn2 {
  84.     0%{
  85.         transform: rotate(225deg);
  86.     }
  87.     50%,100%{
  88.         transform: rotate(-135deg);
  89.     }
  90. }

Here's the result of the script above.

There you go! I hope this Creating an Infinity Loader using HTML and CSS Tutorial will help you with what you are looking for and will be helpful for current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags
HTML
css
loader
CSS Loader
CSS Animation
CSS Tricks
CSS Tutorial
Inifinity Loader
Inifinity Loader using CSS

Add new comment

About text formats
  • 508 views