Анимация иконок SVG + CSS (Success, Error)

Оцените материал

(4 голосов)

Анимация иконок SVG + CSS (Success, Error)

Для чего?

Стильные анимированые SVG иконки можно использовать на страницах успешной оплаты или например при сохранении личного профиля и прочей информации. Анимация в первую очередь привлекает внимание и даже например не читая, что понаписано на странице по такой иконке можно определить статус выполненых действий. Плюс это красиво и придаст более интересный вид вашему сайту.

SUCCESS

ERROR

SVG код иконок

Код SVG иконок получился даже очень компактным.

<svg viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="am_Success_Icon">
	<path class="am_SVG_circle" d="m443.0136,114.07007a236.95276,236.95276 0 0 1 44.1553,137.73747c0,129.97005 -106.94772,236.96443 -236.91777,236.96443s-236.91777,-106.94772 -236.91777,-236.91777s106.94772,-236.96443 236.91777,-236.96443a236.99941,236.99941 0 0 1 168.72548,70.59483"></path>
	<polyline class="am_SVG_check" points="104.4892349243164,309.2001647949219 195.57406616210938,402.9600524902344 418.9292297363281,85.03718566894531 "></polyline>
</svg>
			
<svg viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="am_Error_Icon">
	<path class="am_SVG_circle" d="m444.34693,114.07007a236.95276,236.95276 0 0 1 44.1553,137.73747c0,129.97005 -106.94772,236.96443 -236.91777,236.96443s-236.91777,-106.94772 -236.91777,-236.91777s106.94772,-236.96443 236.91777,-236.96443a236.99941,236.99941 0 0 1 168.72548,70.59483"></path>
	<line class="am_SVG_error1" y2="390" x2="390" y1="110" x1="110"></line>
	<line class="am_SVG_error2" y2="390" x2="110" y1="110" x1="390"></line>
</svg>

CSS код иконок

CSS стили иконок тоже выглядят не очень громозко.

svg.am_Success_Icon,
svg.am_Error_Icon{
  width: 124px; /* Размер иконок */
  margin: auto auto;
}
.am_sdp_Header_Status{
  color: #fff;
  font-size: 140%;
}
svg.am_Success_Icon path, svg.am_Success_Icon polyline, svg.am_Success_Icon line,
svg.am_Error_Icon path, svg.am_Error_Icon polyline, svg.am_Error_Icon line{
  fill: none;
  stroke: #fff; /* Цвет иконок */
  stroke-width: 15; /* Толщина линий */
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.am_Success_Icon .am_SVG_circle,
svg.am_Error_Icon .am_SVG_circle{
  stroke-dasharray: 1460;
  animation: am_SVG_circle 2s ease-in ;
}

svg.am_Success_Icon .am_SVG_check{
  stroke-dasharray: 630;
  animation: am_SVG_check 2s ease-in ;
}

svg.am_Error_Icon .am_SVG_error1{
  stroke-dasharray: 630;
  animation: am_SVG_error1 2s ease-in ;
}
svg.am_Error_Icon .am_SVG_error2{
  stroke-dasharray: 630;
  animation: am_SVG_error2 3s ease-in ;
}

@keyframes am_SVG_circle {
    0%, 60% {
        stroke-dashoffset: -1460;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes am_SVG_check {
    0% {
        stroke-dashoffset: 630;
    }
    40% {
        stroke-dashoffset: 0;
    }
}
@keyframes am_SVG_error1 {
    0% {
        stroke-dashoffset: 630;
    }
    20% {
        stroke-dashoffset: 0;
    }
}
@keyframes am_SVG_error2 {
    0%, 20% {
        stroke-dashoffset: 630;
    }
    40% {
        stroke-dashoffset: 0;
    }
}

Оставить комментарий

Наверх