A Pen by James Doyle

Thumbnail
This awesome code was written by james2doyle, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright james2doyle ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  James Doyle</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: #2e2e2e;
}

.loader {
  width: 150px;
  margin: 10% auto 0;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="loader">
  <svg width="155" height="155" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css"><![CDATA[
    .path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s linear forwards infinite;
    }

    @keyframes dash {
      0% {
        stroke: white;
        fill: #2e2e2e;
        fill-opacity: 0;
        stroke-dashoffset: 1000;
      }
      100% {
        stroke: #ff7f7e;
        stroke-dashoffset: 450;
        fill: #ff7f7e;
        fill-opacity: 1;
      }
    }
    ]]></style>
  </defs>
 <g>
   <path
        class="path"
        stroke-width="2"
        stroke-miterlimit="10"
        fill-opacity="0"
        d="
        M 63, 63
        m -62, 14
        a 65,65 0 1,0 150,0
        a 65,65 0 1,0 -150,0
        "
  />
 </g>
</svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/james2doyle/a-pen-by-james-doyle-rrJrOA */
body {
  background: #2e2e2e;
}

.loader {
  width: 150px;
  margin: 10% auto 0;
}

Comments