КодSEOБлогИное

Постепенно заполняющийся круг

clip-path

<style>
.raz {
  width: 7em; /* диаметр */
  aspect-ratio: 1; /* ширина = высота */
  border-radius: 50%; /* закругление углов */
  background: darkturquoise; /* цвет */
  animation: progress 10s cubic-bezier(.25, .4, .75, .6) infinite; /* скорость анимации */
}
@keyframes progress {
    0% { clip-path: polygon(50% 50%, 50% -21%, 50% -21%, 50% -21%, 50% -21%, 50% -21%); }
   25% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 121% 50%, 121% 50%, 121% 50%); }
   50% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 50% 121%, 50% 121%, 50% 121%); }
   75% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 50% 121%, -21% 50%, -21% 50%); }
  100% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 50% 121%, -21% 50%, 50% -21%); }
}
</style>

<div class="raz"></div>

Плавное уменьшение рамки круглого элемента по щелчку

<style>
.raz {
  display: inline-block;
  width: 7em;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1em solid darkturquoise;
}
.raz:focus {
  animation: progress 10s cubic-bezier(.25, .4, .75, .6) forwards;
}
@keyframes progress {
    0% { clip-path: polygon(50% 50%, 50% -21%, -21% 50%, 50% 121%, 121% 50%, 50% -21%); }
   25% { clip-path: polygon(50% 50%, 50% -21%, -21% 50%, 50% 121%, 121% 50%, 121% 50%); }
   50% { clip-path: polygon(50% 50%, 50% -21%, -21% 50%, 50% 121%, 50% 121%, 50% 121%); }
   75% { clip-path: polygon(50% 50%, 50% -21%, -21% 50%, -21% 50%, -21% 50%, -21% 50%); }
  100% { clip-path: polygon(50% 50%, 50% -21%, 50% -21%, 50% -21%, 50% -21%, 50% -21%); }
}
</style>

<a href="#on" tabindex="0" class="raz"></a>

Постепенное увеличение рамки круга при наведении курсора мышки

Кнопка
<style>
.raz {
  --borderW: 6px;
  position: relative;
  display: inline-grid;
  place-content: center;
  width: 5em;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--borderW) dotted gainsboro;
}
.raz::before {
  content: "";
  position: absolute;
  inset: calc(-1*var(--borderW));
  border: var(--borderW) dotted darkturquoise;
  border-radius: 50%;
  animation: progress 3s cubic-bezier(.25, .4, .75, .6) paused forwards;
}
.raz:hover::before {
  animation-play-state: running;
}
@keyframes progress {
    0% { clip-path: polygon(50% 50%, 50% -21%, 50% -21%, 50% -21%, 50% -21%, 50% -21%); }
   25% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 121% 50%, 121% 50%, 121% 50%); }
   50% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 50% 121%, 50% 121%, 50% 121%); }
   75% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 50% 121%, -21% 50%, -21% 50%); }
  100% { clip-path: polygon(50% 50%, 50% -21%, 121% 50%, 50% 121%, -21% 50%, 50% -21%); }
}
</style>
<div class="raz">Кнопка</div>

Заполнение обводки по кругу

Кнопка
<style>
.raz {
  --borderW: 3px;
  position: relative;
  /* текст по центру */
  display: inline-grid;
  place-content: center;

  aspect-ratio: 11 / 5; /* соотношение ширины / высоты */
  height: 3em; /* высота кнопки */
  border: var(--borderW) solid gainsboro;
  border-radius: 15px;
  user-select: none; /* запретить выделение текста */ 
  box-sizing: border-box; /* рамка входит в ширину/высоту */
}
.raz::before {
  content: "";
  position: absolute;
  inset: calc(-1*var(--borderW));
  border: var(--borderW) solid darkturquoise;
  border-radius: 15px;
  animation: polygon 10s linear infinite;
}
@keyframes polygon {
        0% { clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%, 50% 0%);}
  17.1875% { clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%, 100% 0%); }
  32.8125% { clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%); }
  67.1875% { clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 100%, 0% 100%, 0% 100%, 0% 100%); }
  82.8125% { clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%); }
      100% { clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
}
</style>

<div class="raz">Кнопка</div>

conical-gradient() и @property

Круглый прогресс бар

<style>
.raz {  /* пример из «Круговая диаграмма с одним значением» */
  width: 7em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(aqua, darkturquoise var(--pie-p, 0%), whitesmoke 0);
  --pie-b: 1em;
  mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b)));
}
<style>

<div class="raz" style="--pie-p:30%;"></div>
<input type="range" min="0" max="100" value="30" id="raz"/>

<script>
document.querySelector('#raz').addEventListener('input', progress);
function progress(e) {
  e.currentTarget.previousElementSibling.style.setProperty('--pie-p', e.currentTarget.value + '%')
}
</script>

Изменение цвета индикатора в зависимости от значения, как у meter

<style>
.raz {
  --pie-c: pink, deeppink;
  width: 7em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--pie-c) var(--pie-p, 0%), whitesmoke 0);
  --pie-b: 1em;
  mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b)));
}
.raz:is([style*="4"]:not([style*="4%"]),
        [style*="5"]:not([style*="5%"]),
        [style*="6"]:not([style*="6%"]),
        [style*="44"],
        [style*="55"],
        [style*="66"]) {
  --pie-c: yellow, orange;
}
.raz:is([style*="7"]:not([style*="7%"]),
        [style*="8"]:not([style*="8%"]),
        [style*="9"]:not([style*="9%"]),
        [style*="77"],
        [style*="88"],
        [style*="99"],
        [style*="100"]) {
  --pie-c: lime, green;
}
<style>

<div class="raz" style="--pie-p:30%;"></div>
<input type="range" min="0" max="100" value="30" id="raz"/>

<script>
document.querySelector('#raz').addEventListener('input', progress);
function progress(e) {
  e.currentTarget.previousElementSibling.style.setProperty('--pie-p', e.currentTarget.value + '%')
}
</script>

@property не имеет поддержки Firefox и Safari, без которого не получится настроить анимацию conical-gradient(). 

<style>
.raz {
  width: 7em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(darkturquoise var(--angle, 0deg), whitesmoke 0);
  animation: progress 10s linear infinite;
}
@property --angle { /* создать пользовательское свойство */ 
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes progress {
  to {
    --angle: 360deg;
  }
}
</style>

<div class="raz"></div>

overflow

<style>
.raz {
  position: relative;
  display: inline-block;
  width: 50px; /* 100px (height) : 2 */
  height: 100px;
  border: solid transparent;
  border-width: 0 0 0 50px; /* 100px (height) : 2 */
  border-radius: 50%;
  overflow: hidden;
  animation: background 10s linear infinite;
}
.raz:before {
  content: "";
  position: absolute;
  left: -100%;
  height: 100%;
  border-right: 50px solid transparent;
  border-left: 50px solid darkturquoise;
  border-radius: 50%;
  animation: rotate 10s linear infinite;
}
@keyframes background {
  49.999% {border-width: 0 0 0 50px; border-color: transparent;}
  50%, 100% {border-width: 0 50px 0 0; border-color: darkturquoise;}
}
@keyframes rotate {
  49.999% {left: -100%;}
  50% {left: 0;}
  100% {transform: rotate(360deg); left: 0;}
}
</style>

<div class="raz"></div>
◄▲►
Все комментарии