A Pen by Eran Shapira

Thumbnail
This awesome code was written by eranshapira, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright eranshapira ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Eran Shapira</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="portal-preloader">
  <div class="circle-1"></div>
  <div class="circle-2"></div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/eranshapira/a-pen-by-eran-shapira-EQrdMa */
* {
  box-sizing: border-box;
}
.portal-preloader {
  --size: 64px;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  width: calc(var(--size) * 2);
  height: var(--size);
  margin-left: calc(var(--size) * -1);
  margin-top: calc(var(--size) * -1);
  box-sizing: border-box;
}


.portal-preloader .circle-1, .portal-preloader .circle-2 {
  width: 100%;
  height: 100%;
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
  border: 2px solid #03B9E4;
  border-bottom: 0;
  transform-origin: 50% 100%;
  position: absolute;
  animation: loader-rotate 0.8s infinite linear;
}

.portal-preloader .circle-2 {
  width: 66%;
  height: 66%;
  margin-top: calc(17% + 1px);
  margin-left: calc(17% + 1px);
  border-width: 1px;
  animation-direction: reverse;
}

@keyframes loader-rotate {
  0% {
        transform: rotate(0deg);
  }
  100% {
        transform: rotate(360deg);
  }
}



/*Downloaded from https://www.codeseek.co/eranshapira/a-pen-by-eran-shapira-EQrdMa */
const styleElement = document.createElement('style');
styleElement.innerHTML = `body[state-name="loading"] > div[ui-view] > svg { display: none; } div.preloader-indication > svg {position: fixed; margin: -16px 0px 0px -16px; width: 32px; height: 32px; top: 50%; left: 50%;} 
.preloader-indication > svg .st1, .preloader-indication > svg .st0 { fill: none; stroke: #03B9E4; animation-name: rotate; animation-duration: 0.8s; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: 20px 20px; animation-direction: reverse; stroke-width: 2px; }
.preloader-indication > svg .st1 { stroke-width: 1px; animation-direction: initial; transform: rotate(64deg); }
@keyframes rotate { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }`;
document.querySelector('head').appendChild(styleElement);
const loaderElement = document.createElement('div');
loaderElement.classList.add('preloader-indication');
loaderElement.innerHTML = `<svg version="1.1" id="loadingCircle" xmlns:x="&amp;ns_extend;" xmlns:i="&amp;ns_ai;" xmlns:graph="&amp;ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve" class="svg"> <switch> <g i:extraneous="self">
 <path class="st0" d="M15.1,37.3C7.5,35.1,2,28.2,2,20c0-9.9,8-18,18-18c1.7,0,3.3,0.2,4.8,0.7"></path>
<path class="st1" d="M17.7,7.5c0.8-0.1,1.5-0.2,2.3-0.2c7,0,12.7,5.7,12.7,12.7c0,3.1-1.1,6-3,8.2"></path> </g> </switch> </svg>`;
document.querySelector('body').insertBefore(loaderElement, document.querySelector('div[ui-view]'));

Comments