3

Почему не работает анимация в коде ниже?

.loader{
	width:75px;
	height: 75px;
	border: 10px solid white;
	border-radius: 50%;
	border-top-color:blue;
	left:50%;
	top: 50%;
	position: absolute;
	transform: translate(-50% -50%);
	animation: 2s spin infinite linear;
}

@keyframes spin{
	from{
		transform: translate(-50% -50%) rotate(0deg);
	}
	to{
		transform: translate(-50% -50%) rotate(360deg);
	}
}

2 ответа 2

3

Думаю при сравнении сможете понять почему.

.loader {
  width: 75px;
  height: 75px;
  border: 10px solid white;
  border-radius: 50%;
  border-top-color: blue;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: 2s spin infinite linear;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
<div class="loader"></div>

2
  • Дело было всего лишь в запятых(( Спасибо вам большое
    – yavis
    22 фев 2019 в 12:19
  • 1
    @АлександрПогребняк, со всеми случается, мы не роботы, чтобы делать всё идеально, желаю успехов!
    – meine
    22 фев 2019 в 12:30
1

Нестандартное, интересное решение автора вопроса может быть использовано для простой реализации лоадеров CSS без стандартного применения stroke-dasharray и stroke-dashoffset.

  • Добавляя к исходному коду border-bottom-color: blue; получаем простой круговой лоадер:

.loader {
  width: 75px;
  height: 75px;
  border: 10px solid white;
  border-radius: 50%;
  border-top-color: blue;
  border-bottom-color: blue;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: 2s spin infinite linear;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
<div class="loader"></div>

  • Три секции лоадера
  border-top-color: blue;
  border-bottom-color: blue;
  border-left-color: blue;

.loader {
  width: 75px;
  height: 75px;
  border: 10px solid white;
  border-radius: 50%;
  border-top-color: blue;
  border-bottom-color: blue;
  border-left-color: blue;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: 2s spin infinite linear;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
<div class="loader"></div>

  • Разноцветный лоадер

.loader {
  width: 75px;
  height: 75px;
  border: 10px solid white;
  border-radius: 50%;
  border-top-color: dodgerblue;
  border-bottom-color: crimson;
  border-left-color: yellowgreen;
  border-right-color: gold;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: 2s spin infinite linear;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
<div class="loader"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.