Загрузчик / Spinner CSS с элементом Span - PullRequest
Новая
       36

Загрузчик / Spinner CSS с элементом Span

0 голосов
/ 14 марта 2019

У меня есть элемент span, и я не могу использовать другой.Через этот элемент span я должен достичь функциональности спиннера / загрузчика, и я хочу, чтобы поведение выглядело так, как показано ниже - https://codepen.io/supah/pen/BjYLdW

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

  <span class="spinner"></span>


  .spinner{
    display: block;
    border-radius: 8em;
    width: 8em;
    height: 8em;
    display: inline-block;
    animation: dash 2.0s ease-in-out infinite;
  }

 @keyframes dash {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
  }

Может ли кто-нибудь помочь мне там, где мне не хватает?

Ответы [ 3 ]

2 голосов
/ 14 марта 2019

Команды CSS-анимации работают отлично, но вы не можете их видеть.
Вам нужно изображение, потому что вы не используете <svg> и <circle>, как они используют в примере, который вы приложили.

Обратите внимание, что ширина и высота класса .spinner должны быть шириной и высотой изображения счетчика.

На основании вашего кода: LIVE DEMO 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--remove comment to use jquery-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <style>
      .spinner {
        vertical-align: middle;
        width: 128px;
        height: 128px;
        display: inline-block;
        margin-right: 5px;
        border-radius: 2em;
        -webkit-box-sizing: border-box;
        border-top-color: #fff;
        -webkit-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear;
      }
      .spinner--wholePageWithVeil{
        display: block;
        border-radius: 8em;
        width: 8em;
        height: 8em;
        display: inline-block;
        animation: dash 2.0s ease-in-out infinite;
      }
      @-webkit-keyframes spin {
        100% {
          -webkit-transform: rotate(360deg);
        }
      }
      @keyframes spin {
        100% {
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes dash {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        50% {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil"> 
      <img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
    </span>
  </body>
</html>
1 голос
/ 14 марта 2019

Это для Easy.

Вам необходимо изменить некоторые CSS, дать stroke: #fff; в spinner класс.

Пожалуйста, проверьте и дайте мне знать дальнейшие разъяснения.

Надеюсь, что это поможет. 

html, body {
  height: 100%;
  background-image: linear-gradient(-105deg, #009acc, #363795);
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
      stroke: #fff;
  }
  .path {
    stroke: hsl(210, 70, 75);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
<svg class="spinner" viewBox="0 0 50 50">
  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>

Да, вы также можете создавать с чистым CSS, как это.

Надеюсь, эта помощь. 

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring span {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Да, вам нужно изменить анимацию CSS, например: animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;

Надеюсь, эта помощь. 

span {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
    border-color: #000 #000 #000 transparent;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<span></span>
0 голосов
/ 14 марта 2019

Не уверен, что вы делали с spinner--wholePageWithVeil.Но это не обязательно.Бит, который вам не хватало, придавал границе ширину и стиль. 

body {
  background-color: #008;
}

.spinner {
  animation: spin 1s infinite ease-in-out; 
//  animation: dash 2s infinite ease-in-out; 
  border-radius: 50%;
  border-top: 2px solid #fff;
  display: inline-block;
  height: 2em;
  margin: calc(50vh - 1em) calc(50vw - 1em);
  width: 2em;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
  }
}

@keyframes dash {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<span class="spinner"></span>
...