Pure CSS Only animated Infinity path loader

by Posted on

An animated loader helps to display something loading on page. fancy full page animated loader give cool look to your website whenever someone click on any hyperlink on page then you can display these types of cool animated full page loader bar that’s why in this post i am going to share awesome Pure CSS Only animated Infinity path loader which you can use as full page loader.
Pure CSS Only animated Infinity path loader

HTML

<div class="infinity-path">
  <div></div>
  <div></div>
</div>


CSS

 
/**
  * infinity-path
  *
  * @author jh3y
*/
.infinity-path {
  --size: 120;
  --speed: 0.65;
  height: calc(var(--size) * 1px);
  position: relative;
  width: calc(var(--size) * 1px);
 
  & > div {
    height: calc(var(--size) * 1px);
    width: calc(var(--size) * 1px);
    border-radius: 100%;
    border: calc(var(--size) / 4 * 1px) solid rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: calc(var(--speed) * 1s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: infinity-spin;
    transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0);
 
    &:before {
      content: '';
      height: calc(var(--size) / 4 * 1px);
      width: calc(var(--size) / 4 * 1px);
      border-radius: 100%;
      background: var(--primary);
      position: absolute;
      top: 50%;
      animation: infinity-vanish calc(var(--speed) * 2s) infinite reverse steps(1);
      transform: translate(calc(var(--translate-2) * 2px), calc(var(--translate) * 1%));
    }
  }
 
  & > div:nth-of-type(1) {
    --translate: -50;
    --translate-2: calc(var(--size) / 8);
    &:before {
      right: 0;
    }
  }
 
  & > div:nth-of-type(2) {
    --translate: 50;
    --translate-2: calc(var(--size) / 8 * -1);
    animation-delay: calc(var(--speed) * 1s);
    animation-direction: reverse;
 
    &:before {
      left: 0;
      transform: translate(calc(var(--size) / 4 * -1px), -50%);
      animation-direction: normal;
    }
  }
}
 
@keyframes infinity-vanish {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
 
@keyframes infinity-spin {
  from {
    transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(0deg);
  }
  to {
    transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(360deg);
  }
}
 
body {
  --primary: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #663399;  
}
 
*,
*:after,
*:before {
  box-sizing: border-box;
}



See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by jh3y. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin