Page-Loaders

Now a days, if a website takes more than 4 seconds to load,
a visitor might think your site is being unresponsive and
simply close the page and find something else. so, creative page-loaders were created by designers to overcome this problem.

A page loader is any kind of animation that visually communicates to a visitor and also used to keep visitors entertained while the page is still loading.

“spinners” can be used to show the loading state in your projects.you can create loaders with the help of HTML and CSS and there is no need of JavaScript.

You can set different sizes different types and different speed of loaders.And use CSS or inline styles to change the dimensions as needed.

Use spinners within buttons to indicate an action is currently processing or taking place.

The size of the loader is specified with the width and height properties.we add an animation that makes the border-color, spin forever with a 2 second animation speed.

Create a DIV with your page loader in it. Add this DIV to every page on your website that links to the page you need a loader for. Then make sure to add display: none; to your CSS for this DIV, this will make it not show up at all on these pages under normal circumstances.

Making use of a regular UI library, You can assign
diameter of an inner circle;
the speed of animation;
range and density;
color and background color.
you can also choose several standard shapes including oval, square, rectangle, spiral, and rounded rectangle.

Dual-Ring-Loader

.lds-dual-ring {
          display: inline-block;
          width: 64px;
          height: 64px;
      }

          .lds-dual-ring:after {
              content: " ";
              display: block;
              width: 46px;
              height: 46px;
              margin: 1px;
              border-radius: 50%;
              border: 5px solid #0009f8;
              border-color: #0009f8 transparent #ff3366 transparent;
              animation: lds-dual-ring 1.2s linear infinite;
          }

      @keyframes lds-dual-ring {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }
<div class="lds-dual-ring"></div>

Roller -Loader

.lds-roller {
           display: inline-block;
           position: relative;
           width: 64px;
           height: 64px;
       }

           .lds-roller div {
               animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
               transform-origin: 32px 32px;
           }

               .lds-roller div:after {
                   content: " ";
                   display: block;
                   position: absolute;
                   width: 6px;
                   height: 6px;
                   border-radius: 50%;
                   background: #ff3366;
                   margin: -3px 0 0 -3px;
               }

               .lds-roller div:nth-child(1) {
                   animation-delay: -0.036s;
               }

                   .lds-roller div:nth-child(1):after {
                       top: 50px;
                       left: 50px;
                   }

               .lds-roller div:nth-child(2) {
                   animation-delay: -0.072s;
               }

                   .lds-roller div:nth-child(2):after {
                       top: 54px;
                       left: 45px;
                   }

               .lds-roller div:nth-child(3) {
                   animation-delay: -0.108s;
               }

                   .lds-roller div:nth-child(3):after {
                       top: 57px;
                       left: 39px;
                   }

               .lds-roller div:nth-child(4) {
                   animation-delay: -0.144s;
               }

                   .lds-roller div:nth-child(4):after {
                       top: 58px;
                       left: 32px;
                   }

               .lds-roller div:nth-child(5) {
                   animation-delay: -0.18s;
               }

                   .lds-roller div:nth-child(5):after {
                       top: 57px;
                       left: 25px;
                   }

               .lds-roller div:nth-child(6) {
                   animation-delay: -0.216s;
               }

                   .lds-roller div:nth-child(6):after {
                       top: 54px;
                       left: 19px;
                   }

               .lds-roller div:nth-child(7) {
                   animation-delay: -0.252s;
               }

                   .lds-roller div:nth-child(7):after {
                       top: 50px;
                       left: 14px;
                   }

               .lds-roller div:nth-child(8) {
                   animation-delay: -0.288s;
               }

                   .lds-roller div:nth-child(8):after {
                       top: 45px;
                       left: 10px;
                   }

       @keyframes lds-roller {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }
<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

Spinner

.lds-spinner {
          color: official;
          display: inline-block;
          position: relative;
          width: 64px;
          height: 64px;
      }

          .lds-spinner div {
              transform-origin: 32px 32px;
              animation: lds-spinner 1.2s linear infinite;
          }

              .lds-spinner div:after {
                  content: " ";
                  display: block;
                  position: absolute;
                  top: 3px;
                  left: 29px;
                  width: 5px;
                  height: 14px;
                  border-radius: 20%;
                  background: #ff3366;
              }

              .lds-spinner div:nth-child(1) {
                  transform: rotate(0deg);
                  animation-delay: -1.1s;
              }

              .lds-spinner div:nth-child(2) {
                  transform: rotate(30deg);
                  animation-delay: -1s;
              }

              .lds-spinner div:nth-child(3) {
                  transform: rotate(60deg);
                  animation-delay: -0.9s;
              }

              .lds-spinner div:nth-child(4) {
                  transform: rotate(90deg);
                  animation-delay: -0.8s;
              }

              .lds-spinner div:nth-child(5) {
                  transform: rotate(120deg);
                  animation-delay: -0.7s;
              }

              .lds-spinner div:nth-child(6) {
                  transform: rotate(150deg);
                  animation-delay: -0.6s;
              }

              .lds-spinner div:nth-child(7) {
                  transform: rotate(180deg);
                  animation-delay: -0.5s;
              }

              .lds-spinner div:nth-child(8) {
                  transform: rotate(210deg);
                  animation-delay: -0.4s;
              }

              .lds-spinner div:nth-child(9) {
                  transform: rotate(240deg);
                  animation-delay: -0.3s;
              }

              .lds-spinner div:nth-child(10) {
                  transform: rotate(270deg);
                  animation-delay: -0.2s;
              }

              .lds-spinner div:nth-child(11) {
                  transform: rotate(300deg);
                  animation-delay: -0.1s;
              }

              .lds-spinner div:nth-child(12) {
                  transform: rotate(330deg);
                  animation-delay: 0s;
              }

      @keyframes lds-spinner {
          0% {
              opacity: 1;
          }

          100% {
              opacity: 0;
          }
      }
<div class="lds-spinner">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       </div>

circular-Loader

.loader {
           border: 3px solid #0009f8;
           border-radius: 50%;
           border-top: 3px solid #ff3366;
           width: 40px;
           height: 40px;
           -webkit-animation: spin 2s linear infinite; /* Safari */
           animation: spin 2s linear infinite;
       }

       /* Safari */
       @-webkit-keyframes spin {
           0% {
               -webkit-transform: rotate(0deg);
           }

           100% {
               -webkit-transform: rotate(360deg);
           }
       }

       @keyframes spin {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }
<div class="loader" style="margin:auto;"></div>

Cube-Grid

.sk-cube-grid {
      width: 40px;
      height: 40px;
      margin: 100px auto;
    }

          .sk-cube-grid .sk-cube {
              width: 33%;
              height: 33%;
              background-color: #ff3366;
              float: left;
              -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
              animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          }

          .sk-cube-grid .sk-cube1 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

          .sk-cube-grid .sk-cube2 {
              -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
          }

          .sk-cube-grid .sk-cube3 {
              -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
          }

          .sk-cube-grid .sk-cube4 {
              -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
          }

          .sk-cube-grid .sk-cube5 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

          .sk-cube-grid .sk-cube6 {
              -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
          }

          .sk-cube-grid .sk-cube7 {
              -webkit-animation-delay: 0s;
              animation-delay: 0s;
          }

          .sk-cube-grid .sk-cube8 {
              -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
          }

          .sk-cube-grid .sk-cube9 {
              -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
          }

    @-webkit-keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    @keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }
<div class="sk-cube-grid">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div> 
  
    </div>

Line-Loader

.line_loader {
           height: 4px;
           width: 600px;
           position: relative;
           overflow: hidden;
           background-color: #dddeff;
           margin: auto;
       }
      
           .line_loader:before {
               display: block;
               position: absolute;
               content: "";
               width: 200px;
               height: 4px;
               background-color: #0009f8;
               animation: loading 2s linear infinite;
           }

       @keyframes loading {
           from {
               left: -200px;
               width: 30%;
           }

           50% {
               width: 30%;
           }

           to {
               left: 100%;
           }
       }
<div class="line_loader" style="margin-top:100px;"></div>

You should also include a -webkit- prefix for browsers that do not support animation and transform properties.

CSS spinner uses CSS Animation, which is wildly supported by all modern browsers such as Google Chrome and Mozilla Firefox. However, Microsoft Internet Explorer version earlier than 10 don’t support CSS Animation.

To support older IE, you have to use GIF format image.

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *