Анимация загрузки на чистом CSS - пример html js css

• HTML код


• CSS код
• Результат кода

<div class='load'></div>

  

  <script src='https://codepen.io/thebabydino/pen/evPbxv.js'></script>

#btn--yp {

  box-sizing: content-box;

  position: fixed;

  z-index: 9;

  bottom: 1em;

  right: 1em;

  border: solid 1em transparent;

  width: 4.625em;

  height: 3.25em;

  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box;

  font: 16px/1.25 trebuchet ms, sans-serif;

  text-indent: 200vw;

  text-shadow: none;

  filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);

  transition: 0.5s;

  white-space: nowrap;

}

#btn--yp:before {

  box-sizing: inherit;

  position: absolute;

  left: 0;

  bottom: 100%;

  margin: 1em -0.5em;

  padding: 0.5em;

  width: 100%;

  border-radius: 5px;

  background: #e8e0e0;

  color: #000;

  text-align: center;

  text-decoration: none;

  text-indent: 0vw;

  white-space: normal;

  animation: float 1s ease-in-out infinite alternate;

  content: attr(data-txt);

}

#btn--yp:hover, #btn--yp:focus {

  outline: none;

  filter: grayscale(0) drop-shadow(0 0 1px crimson);

}



@keyframes float {

  to {

    transform: translateY(0.75em);

  }

}

body, div {

  display: grid;

}



div, ::before, ::after {

  grid-area: 1/1;

}



body {

  margin: 0;

  height: 100vh;

}

body::before, body::after {

  background: lemonchiffon;

  content: "";

}

body::after {

  place-self: center;

  padding: 7.5em;

  background: linear-gradient(-45deg, #ff8500, #f900a0);

  mix-blend-mode: lighten;

}



.load {

  background: #fff;

  filter: blur(12px) contrast(36) blur(1px);

  mix-blend-mode: darken;

}

.load::before, .load::after {

  --i: 0;

  --sgn-i: calc(2*var(--i) - 1);

  --den: calc(1 + (4 - 1)*var(--i));

  place-self: center;

  margin: 2.25em;

  padding: 7.5em;

  border-radius: 50%;

  background: repeating-conic-gradient(from calc(.5turn/var(--den)*var(--i)), #000 0% calc(50%/var(--den)), transparent 0% calc(100%/var(--den)));

  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.25em), red calc(100% - 2.25em + 1px) calc(100% - 1px), transparent);

  animation: r calc(2.5s/var(--den)) cubic-bezier(0, 0.15, 1, 0.85) infinite;

  content: "";

}

.load::before {

  animation-timing-function: steps(8, start);

}

.load::after {

  --i: 1 ;

}



@keyframes r {

  to {

    transform: rotate(calc(var(--sgn-i)*1turn/var(--den)));

  }

}