Loader by JkHuger

Made by

@JkHuger

Theme:

Light

#loader

#e8e8e8

192 views

CSSAdd prefixes

1.btn {
2  align-items: center;
3  background: #93e2cb;
4  border-radius: 4px;
5  display: flex;
6  height: 80px;
7  justify-content: center;
8  padding: 1rem;
9  width: 180px;
10}
11
12#line {
13  animation: linePencil .8s infinite linear;
14}
15
16@keyframes linePencil {
17  0% {
18    transform: translateY(0);
19  }
20
21  100% {
22    transform: translateY(-150px);
23  }
24}

.btn {
  align-items: center;
  background: #93e2cb;
  border-radius: 4px;
  display: flex;
  height: 80px;
  justify-content: center;
  padding: 1rem;
  width: 180px;
}

#line {
  animation: linePencil .8s infinite linear;
}

@keyframes linePencil {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-150px);
  }
}

HTML

1<div class="loader-pencil-content">
2  <div class="btn">
3    <svg id="loader-pencil" xmlns="http://www.w3.org/2000/svg" width="667" height="182" viewBox="0 0 677.34762 182.15429">
4      <g>
5        <path id="body-pencil" d="M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z">
6        </path>
7        <path id="line" d="M134.482 157.147v25l518.57.008.002-25-518.572-.008z">
8        </path>
9      </g>
10    </svg>
11  </div>
12</div>

<div class="loader-pencil-content">
  <div class="btn">
    <svg id="loader-pencil" xmlns="http://www.w3.org/2000/svg" width="667" height="182" viewBox="0 0 677.34762 182.15429">
      <g>
        <path id="body-pencil" d="M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z">
        </path>
        <path id="line" d="M134.482 157.147v25l518.57.008.002-25-518.572-.008z">
        </path>
      </g>
    </svg>
  </div>
</div>