Simple CSS loaders | 8+ Easy Css loaders with only Html

Simple CSS loaders | 8+ Easy Css loaders with only Html 

Simple CSS loaders | 8+ Easy Css loaders with only Html


Welcome🎉 to Code With Random blog. In this blog, we learn how to create Simple CSS loaders. We use HTML & CSS  for Simple CSS loaders. Hope you enjoy our blog so let's start with a basic HTML structure for the Simple CSS loaders. 

HTML code

 <div class="page">  
      <header class="header">  
           <h1 class="header-title">Simple CSS loaders</h1>  
           <p class="header-subtitle">single html element css animation</p>  
      </header>  
      <main class="container">  
           <div class="item">  
                <i class="loader --2"></i>  
           </div>  
           <div class="item">  
                <i class="loader --9"></i>  
           </div>  
           <div class="item">  
                <i class="loader --3"></i>  
           </div>  
           <div class="item">  
                <i class="loader --4"></i>  
           </div>  
           <div class="item">  
                <i class="loader --1"></i>  
           </div>  
           <div class="item">  
                <i class="loader --5"></i>  
           </div>  
           <div class="item">  
                <i class="loader --6"></i>  
           </div>  
           <div class="item">  
                <i class="loader --8"></i>  
           </div>  
           <div class="item">  
                <i class="loader --7"></i>  
           </div>  
      </main>  
 </div>  
There is all HTML code for the Simple CSS loaders. Now, you can see output without CSS, then we write CSS for the Simple CSS loaders.
Output
Simple CSS loaders | 8+ Easy Css loaders with only Html

CSS code

 .loader {  
      --color: white;  
      --size-mid: 6vmin;  
      --size-dot: 1.5vmin;  
      --size-bar: 0.4vmin;  
      --size-square: 3vmin;  
      display: block;  
      position: relative;  
      width: 50%;  
      display: grid;  
      place-items: center;  
 }  
 .loader::before,  
 .loader::after {  
      content: '';  
      box-sizing: border-box;  
      position: absolute;  
 }  
 /**  
      loader --1  
 **/  
 .loader.--1::before {  
      width: var(--size-mid);  
      height: var(--size-mid);  
      border: 4px solid var(--color);  
      border-top-color: transparent;  
      border-radius: 50%;  
      animation: loader-1 1s linear infinite;  
 }  
 .loader.--1::after {  
      width: calc(var(--size-mid) - 2px);  
      height: calc(var(--size-mid) - 2px);  
      border: 2px solid transparent;  
      border-top-color: var(--color);  
      border-radius: 50%;  
      animation: loader-1 0.6s linear reverse infinite;  
 }  
 @keyframes loader-1 {  
      100% {  
           transform: rotate(1turn);  
      }  
 }  
 /**  
      loader --2  
 **/  
 .loader.--2::before,  
 .loader.--2::after {  
      width: var(--size-dot);  
      height: var(--size-dot);  
      background-color: var(--color);  
      border-radius: 50%;  
      opacity: 0;  
      animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;  
 }  
 .loader.--2::after {  
      animation-delay: 0.3s;  
 }  
 @keyframes loader-2 {  
      0%, 80%, 100% {  
           opacity: 0;  
      }  
      33% {  
           opacity: 1;  
      }  
      0%, 100% {  
           transform: translateX(-4vmin);  
      }  
      90% {  
           transform: translateX(4vmin);  
      }  
 }  
 /**  
      loader --3  
 **/  
 .loader.--3::before,  
 .loader.--3::after {  
      width: var(--size-dot);  
      height: var(--size-dot);  
      background-color: var(--color);  
      border-radius: 50%;  
      animation: loader-3 1.2s ease-in-out infinite;  
 }  
 .loader.--3::before {  
      left: calc(50% - 1.6vmin - var(--size-dot));  
 }  
 .loader.--3::after {  
      left: calc(50% + 1.6vmin);  
      animation-delay: -0.4s;  
 }  
 @keyframes loader-3 {  
      0%, 100% {  
           transform: translateY(-2.6vmin);  
      }  
      44% {  
           transform: translateY(2.6vmin);  
      }  
 }  
 /**  
      loader --4  
 **/  
 .loader.--4::before {  
      height: var(--size-bar);  
      width: 6vmin;  
      background-color: var(--color);  
      animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;  
 }  
 @keyframes loader-4 {  
      0%, 44%, 88.1%, 100% {  
           transform-origin: left;  
      }  
      0%, 100%, 88% {  
           transform: scaleX(0);  
      }  
      44.1%, 88% {  
           transform-origin: right;  
      }  
      33%, 44% {  
           transform: scaleX(1);  
      }  
 }  
 /**  
      loader --5  
 **/  
 .loader.--5::before,  
 .loader.--5::after {  
      height: 3vmin;  
      width: var(--size-bar);  
      background-color: var(--color);  
      animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;  
 }  
 .loader.--5::before {  
      left: calc(50% - 1vmin);  
      top: calc(50% - 3vmin);  
 }  
 .loader.--5::after {  
      left: calc(50% + 1vmin);  
      top: calc(50% - 1vmin);  
      animation-delay: 0.2s;  
 }  
 @keyframes loader-5 {  
      0%, 88%, 100% {  
           opacity: 0;  
      }  
      0% {  
           transform: translateY(-6vmin);  
      }  
      33% {  
           opacity: 1;  
      }  
      33%, 88% {  
           transform: translateY(3vmin);  
      }  
 }  
 /**  
      loader --6  
 **/  
 .loader.--6::before {  
      width: var(--size-square);  
      height: var(--size-square);  
      background-color: var(--color);  
      top: calc(50% - var(--size-square));  
      left: calc(50% - var(--size-square));  
      animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;  
 }  
 @keyframes loader-6 {  
      0%, 100% {  
           transform: none;  
      }  
      25% {  
           transform: translateX(100%);  
      }  
      50% {  
           transform: translateX(100%) translateY(100%);  
      }  
      75% {  
           transform: translateY(100%);  
      }  
 }  
 /**  
      loader --7  
 **/  
 .loader.--7::before,  
 .loader.--7::after {  
      width: var(--size-square);  
      height: var(--size-square);  
      background-color: var(--color);  
 }  
 .loader.--7::before {  
      top: calc(50% - var(--size-square));  
      left: calc(50% - var(--size-square));  
      animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;  
 }  
 .loader.--7::after {  
      top: 50%;  
      left: 50%;  
      animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;  
 }  
 @keyframes loader-7 {  
      0%, 100% {  
           transform: none;  
      }  
      25% {  
           transform: translateX(-100%);  
      }  
      50% {  
           transform: translateX(-100%) translateY(-100%);  
      }  
      75% {  
           transform: translateY(-100%);  
      }  
 }  
 /**  
      loader --8  
 **/  
 .loader.--8::before,  
 .loader.--8::after {  
      width: var(--size-dot);  
      height: var(--size-dot);  
      border-radius: 50%;  
      background-color: var(--color);  
 }  
 .loader.--8::before {  
      top: calc(50% + 4vmin);  
      animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;  
 }  
 .loader.--8::after {  
      opacity: 0;  
      top: calc(50% - 2vmin);  
      animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;  
 }  
 @keyframes loader-8-1 {  
      0%, 55%, 100% {  
           opacity: 0;  
      }  
      0% {  
           transform: scale(0.2);  
      }  
      22% {  
           opacity: 1;  
      }  
      33%, 55% {  
           transform: scale(1) translateY(-6vmin);  
      }  
 }  
 @keyframes loader-8-2 {  
      0%, 100% {  
           opacity: 0;  
      }  
      33% {  
           opacity: 0.3;  
      }  
      0% {  
           transform: scale(0);  
      }  
      100% {  
           transform: scale(4);  
      }  
 }  
 /**  
      loader --9  
 **/  
 .loader.--9::before,  
 .loader.--9::after {  
      width: var(--size-dot);  
      height: var(--size-dot);  
      border-radius: 50%;  
      background-color: var(--color);  
      animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;  
 }  
 .loader.--9::before {  
      left: calc(50% - var(--size-dot) - 1.6vmin);  
 }  
 .loader.--9::after {  
      left: calc(50% + 1.6vmin);  
      animation-delay: 0.12s;  
 }  
 @keyframes loader-9 {  
      0%, 100% {  
           opacity: 0;  
      }  
      0% {  
           transform: translate(-4vmin, -4vmin);  
      }  
      66% {  
           opacity: 1;  
      }  
      66%, 100% {  
           transform: none;  
      }  
 }  
 /**  
      miscs  
 **/  
 .container {  
      display: grid;  
      grid-template-columns: repeat(3, 18vmin);  
      grid-template-rows: repeat(3, 18vmin);  
      grid-gap: 1vmin;  
 }  
 .item     {  
      background: rgba(255, 255, 255, 0.1);  
      display: grid;  
      place-items: center;  
      border-radius: 4px;  
      transition: opacity 0.4s ease;  
 }  
 .container:hover .item {  
      opacity: 0.3;  
 }  
 .container:hover .item:hover {  
      opacity: 1;  
 }  
 .page {  
      margin: auto;  
 }  
 .header {  
      margin-bottom: 4vmin;  
 }  
 .header-title {  
      font-size: 3.75vmin;  
 }  
 .header-subtitle {  
      font-size: 2vmin;  
      text-transform: uppercase;  
      opacity: 0.6;  
 }  
 html, body {  
      display: flex;  
      width: 100%;  
      height: 100%;  
      background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);  
      font-family: 'Noto Sans', sans-serif;  
      color: white;  
      text-align: center;  
      letter-spacing: 0.3px;  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Simple CSS loaders | 8+ Easy Css loaders with only Html


Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Simple CSS loaders, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create Simple CSS loaders using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

code by - Jenning

Check out more.....

Post a Comment

Previous Post Next Post