Предзагрузка с эффектом рисующего линии карандаша

Предзагрузка страницы с эффектом рисующего линии карандаша

CSS

				
					body {
  background-color: #262648;
  margin: 0;
  padding: 0;
}
.container {
/*   background-color: rgba(255,255,255,0.5); */
  border-radius: 50%;
  height: 300px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
}
/*#################################################################### line ####*/
.line-box {
/*   background-color: tomato; */
  display: flex;
  flex-direction: column;
  height: 300px;
  opacity: 0.7;
  left: calc(50% - 75px);
  overflow: hidden;
  position: absolute;
  top: -50px;
  width: 150px;
}
#line01 {
  animation: line-anima01 2s infinite linear;
  position: absolute;
}
@keyframes line-anima01 {
  0% {top: 300px}
  100% {top: -150px}
}
#line02 {
  animation: line-anima01 2s infinite linear;
  animation-delay: -0.65s;
  position: absolute;
}
#line03 {
  animation: line-anima01 2s infinite linear;
  animation-delay: -1.33s;
  position: absolute;
}
.st0{fill:#32BCE8;}
.st1{fill:none;stroke:#000000;stroke-miterlimit:10;}

/*#################################################################### pen ####*/
.pen-box {
  animation: pen-anima 0.665s infinite ease-in-out;
  bottom: 38px;
  height: 120px;
  left: 85px;
  position: absolute;
  transform: rotate(30deg);
  width: 30px;
}
@keyframes pen-anima {
  0% {left: 85px}
  50% {left: 235px}
}
.pen-head {
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #32BCE8 transparent transparent transparent;
  bottom: 0;
  height: 0;
  position: absolute;
  width: 0;
}
.pen-body {
  background-color: #32BCE8;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 30px;
}
.pen-body:after {
  content:"";
  background-color: rgba(255,255,255,0.5);
  height: 110px;
  left: -5px;
  position: absolute;
  top: -5px;
  transform: rotate(5deg);
  width: 20px;
}

/*#################################################################### credit ####*/
#link {
  bottom: 20px;
  color: #32BCE8;
  opacity: 0.6;
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#link p {font-size: 20px; margin: 0; margin-left: 5px;}
#link:hover {opacity: 1;}

HTML

				
					<div class="container">
  <div class="line-box">
    <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In  -->
    <svg  id="line01"
          class="line"
          version="1.1"
          x="0px" 
          y="0px" 
          width="150px" 
          height="150px" 
          viewBox="0 0 151 151" 
          style="enable-background:new 0 0 151 151;"
          xml:space="preserve">
          <path class="st0" 
          d="M1.5,0.5c0.1,3.9,0.6,7.9,1.7,11.6c1.1,3.7,2.8,7.2,5.2,10.1c2.3,2.9,5.3,5.3,8.5,7.1c3.2,1.8,6.7,3.1,10.3,4.1
      c7.2,1.9,14.8,2.6,22.3,3c7.6,0.3,15.2,0.2,22.8,0.1c7.7-0.1,15.3-0.3,23.1-0.1c7.8,0.2,15.6,0.6,23.6,2.3c4,0.9,8,2.1,11.9,3.9
      c3.9,1.9,7.7,4.4,10.8,7.8c3.1,3.4,5.5,7.7,6.9,12.1c1.3,4.4,1.8,8.9,1.8,13.3c0,4.3-0.5,8.8-1.9,13.2c-1.3,4.4-3.6,8.6-6.7,12
      c-3.1,3.4-6.8,6-10.6,7.9c-3.8,1.9-7.8,3.2-11.8,4.1c-7.9,1.8-15.8,2.4-23.6,2.7c-7.8,0.3-15.5,0.2-23.1,0.1
      c-7.7-0.1-15.3-0.1-22.8,0.2c-7.5,0.3-15.1,1-22.3,2.8c-3.6,0.9-7.1,2.2-10.3,3.9c-3.2,1.7-6.2,4-8.6,6.8c-2.4,2.8-4.2,6.2-5.4,9.9
      c-1.2,3.7-1.8,7.6-2,11.5h-1c-0.2-4,0.1-8.1,1-12.1c0.9-4,2.6-7.9,5-11.2c2.4-3.4,5.6-6.1,9-8.3c3.4-2.2,7.2-3.8,10.9-5
      c7.6-2.4,15.4-3.6,23.1-4.3c7.7-0.8,15.5-1,23.1-1.3c7.7-0.3,15.3-0.5,22.8-1c7.5-0.5,15-1.4,22-3.2c3.5-0.9,6.9-2.1,9.9-3.7
      c3-1.6,5.7-3.6,7.8-6c2.1-2.4,3.6-5.3,4.5-8.5c0.9-3.2,1.3-6.7,1.2-10.3c-0.1-7.2-1.9-13.8-6.2-18.5c-4.2-4.8-10.7-7.8-17.7-9.7
      c-7-1.9-14.4-2.9-22-3.5c-7.5-0.6-15.2-0.9-22.8-1.2C64.7,42.3,57,42,49.3,41.2c-7.7-0.8-15.5-1.9-23-4.4c-3.8-1.2-7.4-2.8-10.8-5
      C12,29.8,8.9,27,6.5,23.7c-2.4-3.3-4-7.2-4.9-11.1c-0.9-4-1.2-8-1-12H1.5z"/>
    </svg>
    <svg  id="line02"
          class="line"
          version="1.1"
          x="0px" 
          y="0px" 
          width="150px" 
          height="150px" 
          viewBox="0 0 151 151" 
          style="enable-background:new 0 0 151 151;"
          xml:space="preserve">
          <path class="st0" 
          d="M1.5,0.5c0.1,3.9,0.6,7.9,1.7,11.6c1.1,3.7,2.8,7.2,5.2,10.1c2.3,2.9,5.3,5.3,8.5,7.1c3.2,1.8,6.7,3.1,10.3,4.1
      c7.2,1.9,14.8,2.6,22.3,3c7.6,0.3,15.2,0.2,22.8,0.1c7.7-0.1,15.3-0.3,23.1-0.1c7.8,0.2,15.6,0.6,23.6,2.3c4,0.9,8,2.1,11.9,3.9
      c3.9,1.9,7.7,4.4,10.8,7.8c3.1,3.4,5.5,7.7,6.9,12.1c1.3,4.4,1.8,8.9,1.8,13.3c0,4.3-0.5,8.8-1.9,13.2c-1.3,4.4-3.6,8.6-6.7,12
      c-3.1,3.4-6.8,6-10.6,7.9c-3.8,1.9-7.8,3.2-11.8,4.1c-7.9,1.8-15.8,2.4-23.6,2.7c-7.8,0.3-15.5,0.2-23.1,0.1
      c-7.7-0.1-15.3-0.1-22.8,0.2c-7.5,0.3-15.1,1-22.3,2.8c-3.6,0.9-7.1,2.2-10.3,3.9c-3.2,1.7-6.2,4-8.6,6.8c-2.4,2.8-4.2,6.2-5.4,9.9
      c-1.2,3.7-1.8,7.6-2,11.5h-1c-0.2-4,0.1-8.1,1-12.1c0.9-4,2.6-7.9,5-11.2c2.4-3.4,5.6-6.1,9-8.3c3.4-2.2,7.2-3.8,10.9-5
      c7.6-2.4,15.4-3.6,23.1-4.3c7.7-0.8,15.5-1,23.1-1.3c7.7-0.3,15.3-0.5,22.8-1c7.5-0.5,15-1.4,22-3.2c3.5-0.9,6.9-2.1,9.9-3.7
      c3-1.6,5.7-3.6,7.8-6c2.1-2.4,3.6-5.3,4.5-8.5c0.9-3.2,1.3-6.7,1.2-10.3c-0.1-7.2-1.9-13.8-6.2-18.5c-4.2-4.8-10.7-7.8-17.7-9.7
      c-7-1.9-14.4-2.9-22-3.5c-7.5-0.6-15.2-0.9-22.8-1.2C64.7,42.3,57,42,49.3,41.2c-7.7-0.8-15.5-1.9-23-4.4c-3.8-1.2-7.4-2.8-10.8-5
      C12,29.8,8.9,27,6.5,23.7c-2.4-3.3-4-7.2-4.9-11.1c-0.9-4-1.2-8-1-12H1.5z"/>
    </svg>
    <svg  id="line03"
          class="line"
          version="1.1"
          x="0px" 
          y="0px" 
          width="150px" 
          height="150px" 
          viewBox="0 0 151 151" 
          style="enable-background:new 0 0 151 151;"
          xml:space="preserve">
          <path class="st0" 
          d="M1.5,0.5c0.1,3.9,0.6,7.9,1.7,11.6c1.1,3.7,2.8,7.2,5.2,10.1c2.3,2.9,5.3,5.3,8.5,7.1c3.2,1.8,6.7,3.1,10.3,4.1
      c7.2,1.9,14.8,2.6,22.3,3c7.6,0.3,15.2,0.2,22.8,0.1c7.7-0.1,15.3-0.3,23.1-0.1c7.8,0.2,15.6,0.6,23.6,2.3c4,0.9,8,2.1,11.9,3.9
      c3.9,1.9,7.7,4.4,10.8,7.8c3.1,3.4,5.5,7.7,6.9,12.1c1.3,4.4,1.8,8.9,1.8,13.3c0,4.3-0.5,8.8-1.9,13.2c-1.3,4.4-3.6,8.6-6.7,12
      c-3.1,3.4-6.8,6-10.6,7.9c-3.8,1.9-7.8,3.2-11.8,4.1c-7.9,1.8-15.8,2.4-23.6,2.7c-7.8,0.3-15.5,0.2-23.1,0.1
      c-7.7-0.1-15.3-0.1-22.8,0.2c-7.5,0.3-15.1,1-22.3,2.8c-3.6,0.9-7.1,2.2-10.3,3.9c-3.2,1.7-6.2,4-8.6,6.8c-2.4,2.8-4.2,6.2-5.4,9.9
      c-1.2,3.7-1.8,7.6-2,11.5h-1c-0.2-4,0.1-8.1,1-12.1c0.9-4,2.6-7.9,5-11.2c2.4-3.4,5.6-6.1,9-8.3c3.4-2.2,7.2-3.8,10.9-5
      c7.6-2.4,15.4-3.6,23.1-4.3c7.7-0.8,15.5-1,23.1-1.3c7.7-0.3,15.3-0.5,22.8-1c7.5-0.5,15-1.4,22-3.2c3.5-0.9,6.9-2.1,9.9-3.7
      c3-1.6,5.7-3.6,7.8-6c2.1-2.4,3.6-5.3,4.5-8.5c0.9-3.2,1.3-6.7,1.2-10.3c-0.1-7.2-1.9-13.8-6.2-18.5c-4.2-4.8-10.7-7.8-17.7-9.7
      c-7-1.9-14.4-2.9-22-3.5c-7.5-0.6-15.2-0.9-22.8-1.2C64.7,42.3,57,42,49.3,41.2c-7.7-0.8-15.5-1.9-23-4.4c-3.8-1.2-7.4-2.8-10.8-5
      C12,29.8,8.9,27,6.5,23.7c-2.4-3.3-4-7.2-4.9-11.1c-0.9-4-1.2-8-1-12H1.5z"/>
    </svg>
  </div>
  <div class="pen-box">
    <div class="pen-body"></div>
    <div class="pen-head"></div>
  </div>
</div>

<a href="https://satorpro.ru/" target="_blank">
  <div id="link">
    <i class="fab fa-codepen"></i>
    <p>перейти на главную</p>
  </div>
</a>

JS

				
					No code!

Код взят с сайта codepen.io

Поделиться

Подписывайтесь на нашу рассылку

Получайте обновления и учитесь у лучших

или подписывайтесь на наши каналы

    •

    Еще больше интересного

    Нужна разработка сайта, его продвижение или настройка рекламы?

    Оставьте свои контакты и мы свяжемся с Вами в ближайшее время

    Оставить заявку
    SATORpro разработка сайтов, настройка интернет-рекламы
    Прокрутить вверх

    Оставьте заявку

    small_c_popup.png