{"id":269208,"date":"2015-11-27T23:34:02","date_gmt":"2015-11-27T20:34:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=269208"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=269208","title":{"rendered":"\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0440\u0443\u0433\u043b\u0443\u044e Progress Button"},"content":{"rendered":"

\u0423\u0440\u043e\u043a \u043f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0440\u0443\u0433\u043b\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (\u0434\u0430\u043b\u0435\u0435 progress button) by Colin Garven. \u0411\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e by Jake Archibald, \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 SVG \u043b\u0438\u043d\u0438\u0439 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c progress button \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u00absuccess and fail\u00bb.
\"image\"\/<\/a><\/p>\n

\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0432\u0430\u043c \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0437\u044f\u0449\u043d\u0443\u044e progress button. \u042d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442 submit button, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 by Colin Garven. \u0421\u043f\u0435\u0440\u0432\u0430 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e (Demo<\/a> ), \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0439\u0442\u0435\u0441\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439. \u0418\u0434\u0435\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c: \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043a\u043b\u0438\u043a\u0435 submit button \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0440\u0443\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0432\u043e\u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b (\u0434\u0430\u043b\u0435\u0435 \u0431\u043e\u0440\u0434\u0435\u0440). \u041a\u043e\u0433\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f, \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u0435\u0440\u043d\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u043a\u0443, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0443\u044e, \u0447\u0442\u043e \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n

\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u0442\u0430\u043a\u0438\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c. \u0414\u0443\u043c\u0430\u044f \u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c CSS, \u0441\u0430\u043c\u043e\u0439 \u0442\u044f\u0436\u0451\u043b\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043a\u0440\u0443\u0433 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 clip. Anders Ingemann \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u043e\u043b\u043d\u044b\u0439 tutorial<\/a> (\u043d\u0430 LESS). \u041d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0445\u043d\u0438\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 SVG, CSS transitions \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e JS. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0440\u0443\u0433\u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430, \u043e\u0442\u043c\u0435\u0442\u043e\u043a success \/fail, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u043e\u0439 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f SVG \u043b\u0438\u043d\u0438\u0439, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e by Jake Archibald.<\/p>\n

\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 SVG \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u044b\u043c \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 tutorial \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435.<\/p>\n

\u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n

The Master plan<\/h2>\n

\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u043b\u0438 Colin\u2019s Dribbble shot, \u0442\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \u043a\u043d\u043e\u043f\u043a\u0438. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u2013 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0442\u0430\u043a\u0438\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u0421\u043f\u0435\u0440\u0432\u0430 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0444\u043e\u043d\u043e\u043c \u0438 \u0446\u0432\u0435\u0442\u043d\u044b\u043c \u0431\u043e\u0440\u0434\u0435\u0440\u043e\u043c. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u043a\u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u043e\u043c \u0431\u043e\u0440\u0434\u0435\u0440\u0430, \u0430 \u0442\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u0435\u043b\u044b\u043c. <\/p>\n

\"image\"\/<\/p>\n

\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 (\u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0444\u043e\u0440\u043c\u044b), \u0442\u0435\u043a\u0441\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043b\u0430\u0432\u043d\u043e \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442\u044c, \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u2014 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u0441\u044f \u0434\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430, \u0431\u043e\u0440\u0434\u0435\u0440 \u2014 \u0441\u0442\u0430\u0442\u044c \u0443\u0436\u0435, \u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u043d\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SVG-\u043a\u0440\u0443\u0433 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0430\u044f\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u0432 \u0442\u043e\u0439 \u0436\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u0447\u0442\u043e \u0438 SVG-\u043a\u0440\u0443\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0434\u0435\u043d \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0433, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f.<\/p>\n

\"image\"\/<\/p>\n

\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e, \u0430 \u043a\u0440\u0443\u0433 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d, \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043d\u043e\u0432\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f. \u0418 \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n

\"image\"\/<\/p>\n

\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u0443\u0434\u0430\u0447\u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n

\"image\"\/<\/p>\n

\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448\u0443 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n

\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/h2>\n

\u0414\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e \u0441\u043f\u0430\u043d\u043e\u043c(span), \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c \u0442\u0435\u043a\u0441\u0442, \u0438 \u0442\u0440\u0438 SVG:<\/p>\n

<!-- progress button --> <div id="progress-button" class="progress-button"> \t<!-- button with text --> \t<button><span>Submit<\/span><\/button>  \t<!-- svg circle for progress indication --> \t<svg class="progress-circle" width="70" height="70"> \t\t<path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"\/> \t<\/svg>  \t<!-- checkmark to show on success --> \t<svg class="checkmark" width="70" height="70"> \t\t<path d="m31.5,46.5l15.3,-23.2"\/> \t\t<path d="m31.5,46.5l-8.5,-7.1"\/> \t<\/svg>  \t<!-- cross to show on error --> \t<svg class="cross" width="70" height="70"> \t\t<path d="m35,35l-9.3,-9.3"\/> \t\t<path d="m35,35l9.3,9.3"\/> \t\t<path d="m35,35l-9.3,9.3"\/> \t\t<path d="m35,35l9.3,-9.3"\/> \t<\/svg>  <\/div><!-- \/progress-button --> <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Method Draw<\/a>, \u0432\u0435\u0434\u044c \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043d\u043b\u0430\u0439\u043d SVG \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0438 \u043a\u0440\u0435\u0441\u0442\u0438\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u0441\u0435\u0445 SVG \u0431\u0443\u0434\u0443\u0442 70\u044570, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u044b\u0441\u043e\u0442\u0430 \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 70\u0440\u0445. \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043a\u0440\u0443\u0433 \u0441 \u0431\u043e\u0440\u0434\u0435\u0440\u043e\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u043e\u0439 \u0432 5 \u0435\u0434\u0438\u043d\u0438\u0446 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0434\u0438\u0443\u0441, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0438\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u0434\u0430 \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0441\u044c \u043a\u0440\u0443\u0433 \u0441 \u0435\u0433\u043e \u0431\u043e\u0440\u0434\u0435\u0440\u043e\u043c \u0438\u043c\u0435\u043b \u0432\u044b\u0441\u043e\u0442\u0443 70\u0440\u0445. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0432 SVG \u043e\u0431\u0432\u043e\u0434\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043e\u0431\u0432\u043e\u0434\u043a\u0430 \u0442\u043e\u043b\u0449\u0438\u043d\u043e\u0439 \u0432 2\u0440\u0445 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442 \u043a\u0440\u0443\u0433 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c \u0432 10\u0440\u0445 \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u0435 \u0438 \u0432\u044b\u0441\u043e\u0442\u0435 20+2 \u0432\u043c\u0435\u0441\u0442\u043e 20+4(\u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u043e\u0440\u0434\u0435\u0440\u0430 \u0434\u0432\u0430\u0436\u0434\u044b), \u0442\u043e \u0435\u0441\u0442\u044c \u0444\u043e\u0440\u043c\u0443\u043b\u0430 2*r+border. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043c\u044b \u0437\u043d\u0430\u0435\u043c 2*r+5=70, \u043e\u0442 \u0441\u044e\u0434\u0430 \u043d\u0430\u0448 \u043a\u0440\u0443\u0433 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0434\u0438\u0443\u0441 \u0432 32,5\u0440\u0445. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b\u0445\u043e\u0434\u0438\u0442: \/>.<\/p>\n
  \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441\u0432\u043e\u0438 \u0438 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0433\u0434\u0435 \u00ab\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430\u0447\u043d\u0451\u0442\u0441\u044f\u00bb. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0444\u043e\u0440\u043c\u0443 \u0432 path \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u0432 Method Draw under Object > Convert to Path.<\/p>\n
  \u0414\u043b\u044f \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0440\u0435\u0434\u043d\u0435\u0439 \u0442\u043e\u0447\u043a\u0438, \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0433\u0430\u043b\u043e\u0447\u043a\u0443.<\/p>\n
  \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u041f\u0440\u043e\u0434\u0443\u043c\u0430\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u043d\u0430\u0447\u043d\u0435\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n
CSS<\/h2>\n
  \u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
.progress-button { \tposition: relative; \tdisplay: inline-block; \ttext-align: center; } <\/code><\/pre>\n
  \u0423\u043a\u0430\u0436\u0435\u043c \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0448\u0440\u0438\u0444\u0442\u044b. \u0427\u0442\u043e \u0431\u044b \u043e\u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0431\u043e\u0440\u0434\u0435\u0440 \u0438 \u0448\u0440\u0438\u0444\u0442 Montserrat:<\/p>\n
.progress-button button { \tdisplay: block; \tmargin: 0 auto; \tpadding: 0; \twidth: 250px; \theight: 70px; \tborder: 2px solid #1ECD97; \tborder-radius: 40px; \tbackground: transparent; \tcolor: #1ECD97; \tletter-spacing: 1px; \tfont-size: 18px; \tfont-family: 'Montserrat', sans-serif; \t-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s; \ttransition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s; } <\/code><\/pre>\n
  \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u0430\u0432\u0438\u043c transition \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f (background-color, width etc.). <\/p>\n
  \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u0438 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n
.progress-button button:hover { \tbackground-color: #1ECD97; \tcolor: #fff; } <\/code><\/pre>\n
  \u0423\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 (outline):<\/p>\n
.progress-button button:focus { \toutline: none; } <\/code><\/pre>\n
  \u0412\u0441\u0435 SVG \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443, \u0432\u0441\u0435 pointer-events \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b:<\/p>\n
.progress-button svg { \tposition: absolute; \ttop: 0; \tleft: 50%; \t-webkit-transform: translateX(-50%); \ttransform: translateX(-50%); \tpointer-events: none; } <\/code><\/pre>\n
  \u0424\u043e\u0440\u043c\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0433\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439. \u041c\u044b \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0438 \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \u043a\u043d\u043e\u043f\u043a\u0438, \u043a\u0440\u043e\u043c\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043f\u0440\u044f\u0447\u0435\u043c \u0438\u0445, \u0441\u0434\u0435\u043b\u0430\u0432 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438:<\/p>\n
.progress-button svg path { \topacity: 0; \tfill: none; } <\/code><\/pre>\n
  \u041d\u0430\u0448 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u0447\u043d\u044b\u0439 \u043a\u0440\u0443\u0433 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 stroke-width \u0432 5 \u0435\u0434\u0438\u043d\u0438\u0446:<\/p>\n
.progress-button svg.progress-circle path { \tstroke: #1ECD97; \tstroke-width: 5; } <\/code><\/pre>\n
  Success\/fail \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0431\u0432\u043e\u0434\u043a\u0443 \u0442\u043e\u043d\u044c\u0448\u0435, \u0438 \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0431\u0435\u043b\u043e\u0439. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0443 stroke-linecap \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 round, \u0442\u0430\u043a \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435. \u0423 \u043d\u0438\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438:<\/p>\n
.progress-button svg.checkmark path, .progress-button svg.cross path { \tstroke: #fff; \tstroke-linecap: round; \tstroke-width: 4; \t-webkit-transition: opacity 0.1s; \ttransition: opacity 0.1s; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u0435\u0437\u044e\u043c\u0438\u0440\u0443\u0435\u043c \u0438 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043d\u0430\u0448 master plan. \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u044b\u043b\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u043f\u043e\u043c\u0438\u043c\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e) \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0411\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u201cloading\u201d, \u201csuccess\u201d \u0438 \u201cerror\u201d \u0434\u043b\u044f \u0438\u0445 \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n
  \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u0440\u0443\u0433\u043b\u043e\u0439 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u0447\u043d\u044b\u0439 \u043a\u0440\u0443\u0433 SVG, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438:  <\/p>\n
.loading.progress-button button { \twidth: 70px; \/* make a circle *\/ \tborder-width: 5px; \tborder-color: #ddd; \tbackground-color: transparent; \tcolor: #fff; } <\/code><\/pre>\n
  \u041f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 transition, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0434\u0430\u0432\u0430\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438. \u0422\u0435\u043a\u0441\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438,\u2026<\/p>\n
.loading.progress-button span { \t-webkit-transition: opacity 0.15s; \ttransition: opacity 0.15s; } <\/code><\/pre>\n
  \u2026 \u043f\u0443\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0443\u043b\u0435\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438:<\/p>\n
.loading.progress-button span, .success.progress-button span, .error.progress-button span { \topacity: 0; \/* keep it hidden in all states *\/ } <\/code><\/pre>\n
  \u041f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0441 loading \u043d\u0430 success\/error \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d transition, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0442\u0435\u043a\u0441\u0442 \u0441\u043a\u0440\u044b\u0442\u044b\u043c.<\/p>\n
  \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. \u0422\u0435\u043a\u0441\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0435\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0434\u043b\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n
\/* Transition for when returning to default state *\/ .progress-button button span { \t-webkit-transition: opacity 0.3s 0.1s; \ttransition: opacity 0.3s 0.1s; } <\/code><\/pre>\n
  \u041f\u0440\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c transition, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0435 \u043d\u0430\u0434\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u0431\u043e\u0440\u0434\u0435\u0440\u0430 \u0438\u043b\u0438 \u0448\u0438\u0440\u043e\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
.success.progress-button button, .error.progress-button button { \t-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s; \ttransition: background-color 0.3s, width 0.3s, border-width 0.3s; } <\/code><\/pre>\n
  \u0417\u0430\u0434\u0430\u0434\u0438\u043c \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n
.success.progress-button button { \tborder-color: #1ECD97; \tbackground-color: #1ECD97; }  .error.progress-button button { \tborder-color: #FB797E; \tbackground-color: #FB797E; } <\/code><\/pre>\n
  \u041a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u0448\u0443 SVG \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c stroke-dashoffset \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f transition:<\/p>\n
.loading.progress-button svg.progress-circle path, .success.progress-button svg.checkmark path, .error.progress-button svg.cross path { \topacity: 1; \t-webkit-transition: stroke-dashoffset 0.3s; \ttransition: stroke-dashoffset 0.3s; } <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c easing \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0448\u0438\u0440\u043e\u0442\u044b \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
.elastic.progress-button button { \t-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s; \t-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s; \ttransition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s; }  .loading.elastic.progress-button button { \t-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s; \t-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s; \ttransition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s; } <\/code><\/pre>\n
  \u0415\u0441\u043b\u0438 \u0432\u044b \u043b\u044e\u0431\u0438\u0442\u0435 \u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 easing-\u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u2013 \u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 Ceaser<\/a>, CSS Easing Animation Tool by Matthew Lein. <\/p>\n
  \u0421\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c, \u0442\u0432\u043e\u0440\u0438\u043c \u043c\u0430\u0433\u0438\u044e \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n
JavaScript<\/h2>\n
  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: button \u2013 \u044d\u0442\u043e html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 button, progressEl \u2013 SVG \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043b\u044c\u0446\u043e progress bar, \u0430 successEl, errorEl \u2013 SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u0430\u043b\u043e\u0447\u043a\u0430 \u0438 \u043a\u0440\u0435\u0441\u0442\u0438\u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e:<\/p>\n
function UIProgressButton( el, options ) { \tthis.el = el; \tthis.options = extend( {}, this.options ); \textend( this.options, options ); \tthis._init(); }  UIProgressButton.prototype._init = function() { \tthis.button = this.el.querySelector( 'button' ); \tthis.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) ); \tthis.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) ); \tthis.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) ); \t\/\/ init events \tthis._initEvents(); \t\/\/ enable button \tthis._enable(); } <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e SVGEI, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0442\u043e \u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0438\u0445 paths. \u041c\u044b \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c path \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u0438\u043d\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u00ab\u043e\u0442\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c\u00bb \u0432\u0441\u0435 paths, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 strokeDasharray \u0438 strokeDashoffset. \u041f\u043e\u0437\u0436\u0435 \u043c\u044b \u00ab\u0432\u0442\u044f\u043d\u0435\u043c\u00bb \u0438\u0445 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u0447\u043d\u044b\u0439 \u043a\u0440\u0443\u0433, \u0438\u043b\u0438 \u0433\u0430\u043b\u043e\u0447\u043a\u0443, \u0438\u043b\u0438 \u043a\u0440\u0435\u0441\u0442\u0438\u043a. \u042d\u0442\u0443 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 Jake Archibald \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 Animated line drawing in SVG<\/a>. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 stroke-dasharray \u0440\u0430\u0432\u043d\u043e\u0435 \u0434\u043b\u0438\u043d\u0435 path \u0438 \u043e\u0442\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 stroke-dashoffset \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0432\u043d\u043e\u0435 \u0435\u0433\u043e \u0434\u043b\u0438\u043d\u0435, \u043c\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u0435\u0433\u043e. \u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u0443 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c offset \u043d\u0430 0, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b:  <\/p>\n
function SVGEl( el ) { \tthis.el = el; \t\/\/ the path elements \tthis.paths = [].slice.call( this.el.querySelectorAll( 'path' ) ); \t\/\/ we will save both paths and its lengths in arrays \tthis.pathsArr = new Array(); \tthis.lengthsArr = new Array(); \tthis._init(); }  SVGEl.prototype._init = function() { \tvar self = this; \tthis.paths.forEach( function( path, i ) { \t\tself.pathsArr[i] = path; \t\tpath.style.strokeDasharray = self.lengthsArr[i] = path.getTotalLength(); \t} ); \t\/\/ undraw stroke \tthis.draw(0); }  \/\/ val in [0,1] : 0 - no stroke is visible, 1 - stroke is visible SVGEl.prototype.draw = function( val ) { \tfor( var i = 0, len = this.pathsArr.length; i < len; ++i ){ \t\tthis.pathsArr[ i ].style.strokeDashoffset = this.lengthsArr[ i ] * ( 1 - val ); \t} } <\/code><\/pre>\n
  \u0414\u0430\u043b\u0435\u0435, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c onclick event \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 \u043a\u0440\u0443\u0433 (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 loading). \u041f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043b\u0438\u0431\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 callback \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0430 100%. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f (\u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b \u0431\u044b\u0442\u044c \u0441\u0430\u043c\u044b\u043c \u043f\u0435\u0440\u0432\u044b\u043c, \u043e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043a\u0430\u043a firefox, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0443\u0434\u0430\u043b\u0438\u0442\u044c transitionend event):<\/p>\n
UIProgressButton.prototype._initEvents = function() { \tvar self = this; \tthis.button.addEventListener( 'click', function() { self._submit(); } ); }  UIProgressButton.prototype._submit = function() { \tclassie.addClass( this.el, 'loading' ); \t \tvar self = this, \t\tonEndBtnTransitionFn = function( ev ) { \t\t\tif( support.transitions ) { \t\t\t\tthis.removeEventListener( transEndEventName, onEndBtnTransitionFn ); \t\t\t} \t\t\t \t\t\tthis.setAttribute( 'disabled', '' );  \t\t\tif( typeof self.options.callback === 'function' ) { \t\t\t\tself.options.callback( self ); \t\t\t} \t\t\telse { \t\t\t\tself.setProgress(1); \t\t\t\tself.stop(); \t\t\t} \t\t};  \tif( support.transitions ) { \t\tthis.button.addEventListener( transEndEventName, onEndBtnTransitionFn ); \t} \telse { \t\tonEndBtnTransitionFn(); \t} } <\/code><\/pre>\n
  \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 100%, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u0447\u043d\u043e\u0433\u043e \u043a\u0440\u0443\u0433\u0430. \u0417\u0430\u0442\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u0433\u0430\u043b\u043e\u0447\u043a\u0443, \u043b\u0438\u0431\u043e \u043a\u0440\u0435\u0441\u0442\u0438\u043a. \u0427\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (options.statusTime) \u043c\u044b \u0443\u0431\u0435\u0440\u0451\u043c \u0432\u0441\u0435 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0437\u0430\u043d\u043e\u0432\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c CSS.   <\/p>\n
UIProgressButton.prototype.stop = function( status ) { \tvar self = this, \t\tendLoading = function() { \t\t\tself.progressEl.draw(0); \t\t\t \t\t\tif( typeof status === 'number' ) { \t\t\t\tvar statusClass = status >= 0 ? 'success' : 'error', \t\t\t\t\tstatusEl = status >=0 ? self.successEl : self.errorEl;  \t\t\t\tstatusEl.draw( 1 ); \t\t\t\t\/\/ add respective class to the element \t\t\t\tclassie.addClass( self.el, statusClass ); \t\t\t\t\/\/ after options.statusTime remove status and undraw the respective stroke and enable the button \t\t\t\tsetTimeout( function() { \t\t\t\t\tclassie.remove( self.el, statusClass ); \t\t\t\t\tstatusEl.draw(0); \t\t\t\t\tself._enable(); \t\t\t\t}, self.options.statusTime ); \t\t\t} \t\t\telse { \t\t\t\tself._enable(); \t\t\t}  \t\t\tclassie.removeClass( self.el, 'loading' ); \t\t};  \t\/\/ give it a little time (ideally the same like the transition time) so that the last progress increment animation is still visible. \tsetTimeout( endLoading, 300 ); } <\/code><\/pre>\n
  \u041a\u043d\u043e\u043f\u043a\u0430 \u0433\u043e\u0442\u043e\u0432\u0430!<\/p>\n
  \u00abWe hope you enjoyed this tutorial and find it useful!\u00bb       <\/p>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/271881\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
       \u0423\u0440\u043e\u043a \u043f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0440\u0443\u0433\u043b\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (\u0434\u0430\u043b\u0435\u0435 progress button) by Colin Garven. \u0411\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e by Jake Archibald, \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 SVG \u043b\u0438\u043d\u0438\u0439 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c progress button \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u00absuccess and fail\u00bb.
  \"image\"\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-269208","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/269208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=269208"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/269208\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=269208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=269208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=269208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}