Google Loaders

Helpful Google loaders animation built with HTML & CSS, also MP4 and GIF formats are provided for other purposes

Star Download

Use it in your code:

GDSC Loading Spinner

Copy minified CSS from this file (Click here)

Then add HTML in your code:

<div class="loader">
  <div class="dot dot1"></div>
  <div class="dot dot2"></div>
  <div class="dot dot3"></div>
  <div class="dot dot4"></div>
  <div class="dot dot5"></div>
  <div class="dot dot6"></div>
  <div class="dot dot7"></div>
</div>

Google Loading Spinner

Copy minified CSS from this file (Click here)

Then add HTML in your code:

<div class="spinner">
  <svg class="circular" viewBox="25 25 50 50">
    <circle
      class="path"
      cx="50"
      cy="50"
      r="20"
      fill="none"
      stroke-width="2"
      stroke-miterlimit="10"
    />
  </svg>
</div>

Google Loading Bounce

Copy minified CSS from this file (Click here)

Then add HTML in your code:

<div class="bounce">
  <div class="loader-bounce bounce-blue"></div>
  <div class="loader-bounce bounce-red"></div>
  <div class="loader-bounce bounce-yellow"></div>
  <div class="loader-bounce bounce-green"></div>
</div>

Use it in your media: