Web Development
JBlog

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

Rate this item
(1 Vote)

Для чего?

Стильные анимированые 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;    }}
edit Last modified on Monday, 04 March 2019 20:56
Login to post comments