Нестандартное, интересное решение автора вопроса может быть использовано для простой реализации лоадеров 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>