{"id":1482,"date":"2023-05-22T18:59:00","date_gmt":"2023-05-22T15:59:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1482"},"modified":"2023-05-23T15:14:45","modified_gmt":"2023-05-23T12:14:45","slug":"the-progress","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/loader\/1482\/","title":{"rendered":"The progress"},"content":{"rendered":"<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"993\" height=\"455\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/peek-2023-05-22-09-01.gif\" alt=\"The progress\" class=\"wp-image-1484 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;div class=&quot;progress-1&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-2&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-3&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-4&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-5&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-6&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-7&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-8&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-9&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;progress-10&quot;&gt;&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.progress-1 {\n\twidth:120px;\n\theight:20px;\n\tbackground:\n\t linear-gradient(#000 0 0) 0\/0% no-repeat\n\t #ddd;\n\tanimation:p1 2s infinite linear;\n  }\n  @keyframes p1 {\n\t  100% {background-size:100%}\n  }\n  \n  .progress-2 {\n\twidth:120px;\n\theight:20px;\n\tborder-radius: 20px;\n\tbackground:\n\t linear-gradient(orange 0 0) 0\/0% no-repeat\n\t lightblue;\n\tanimation:p2 2s infinite steps(10);\n  }\n  @keyframes p2 {\n\t  100% {background-size:110%}\n  }\n  \n  .progress-3 {\n\twidth:120px;\n\theight:20px;\n\tborder-radius: 20px;\n\tbackground:\n\t repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0\/0%   no-repeat,\n\t repeating-linear-gradient(135deg,#ddd    0 10px,#eee    0 20px) 0\/100%;\n\tanimation:p3 2s infinite;\n  }\n  @keyframes p3 {\n\t  100% {background-size:100%}\n  }\n  \n  .progress-4 {\n\twidth:120px;\n\theight:20px;\n\t-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0\/20%;\n\tbackground:\n\t linear-gradient(#000 0 0) 0\/0% no-repeat\n\t #ddd;\n\tanimation:p4 2s infinite steps(6);\n  }\n  @keyframes p4 {\n\t  100% {background-size:120%}\n  }\n  \n  .progress-5 {\n\twidth:80px;\n\theight:40px;\n\tborder:2px solid currentColor;\n\tborder-right-color: transparent;\n\tpadding:3px;\n\tbackground: \n\t  repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 15px) \n\t  0\/0% no-repeat content-box content-box;\n\tposition: relative;\n\tanimation:p4 2s infinite steps(6);\n  }\n  .progress-5::before {\n\tcontent:&quot;&quot;;\n\tposition: absolute;\n\ttop:-2px;\n\tbottom:-2px;\n\tleft:100%;\n\twidth:10px;\n\tbackground:\n\t  linear-gradient(\n\t\t  #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),\n\t\t  #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left \/100% 100%,\n\t  linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left \/2px 100%,\n\t  linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right\/2px 100%;\n\tbackground-repeat:no-repeat;\n  }\n  @keyframes p5 {\n\t  100% {background-size:120%}\n  }\n  \n  .progress-6 {\n\twidth:120px;\n\theight:22px;\n\tborder-radius: 20px;\n\tcolor:#514b82;\n\tborder:2px solid;\n\tposition: relative;\n  }\n  .progress-6::before {\n\tcontent:&quot;&quot;;\n\tposition: absolute;\n\tmargin:2px;\n\tinset:0 100% 0 0;\n\tborder-radius: inherit;\n\tbackground:currentColor;\n\tanimation:p6 2s infinite;\n  }\n  @keyframes p6 {\n\t  100% {inset:0}\n  }\n  \n  .progress-7 {\n\twidth:120px;\n\theight:24px;\n\t-webkit-mask:\n\t  radial-gradient(circle closest-side,#000 94%,#0000) 0 0\/25% 100%,\n\t  linear-gradient(#000 0 0) center\/calc(100% - 12px) calc(100% - 12px) no-repeat;\n\tbackground:\n\t linear-gradient(#25b09b 0 0) 0\/0% no-repeat\n\t #ddd;\n\tanimation:p7 2s infinite linear;\n  }\n  @keyframes p7 {\n\t  100% {background-size:100%}\n  }\n  \n  .progress-8 {\n\twidth:60px;\n\theight:60px;\n\tborder-radius: 50%;\n\t-webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom\/100% 18.18%;\n\tbackground:\n\t linear-gradient(#f03355 0 0) bottom\/100% 0% no-repeat\n\t #ddd;\n\tanimation:p8 2s infinite steps(7);\n  }\n  @keyframes p8 {\n\t  100% {background-size:100% 115%}\n  }\n  \n  \n  .progress-9 {    \n\t--r1: 154%;\n\t--r2: 68.5%;\n\twidth:60px;\n\theight:60px;\n\tborder-radius: 50%; \n\tbackground:\n\t  radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),\n\t  radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%),\n\t  radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),\n\t  #ccc;\n\tbackground-size: 50.5% 220%;\n\tbackground-position: -100% 0%,0% 0%,100% 0%;\n\tbackground-repeat:no-repeat;\n\tanimation:p9 2s infinite linear;\n  }\n  @keyframes p9 {\n\t  33%  {background-position:    0% 33% ,100% 33% ,200% 33% }\n\t  66%  {background-position: -100%  66%,0%   66% ,100% 66% }\n\t  100% {background-position:    0% 100%,100% 100%,200% 100%}\n  }\n\n  \n  .progress-10 {\n\twidth:120px;\n\theight:60px;\n\tborder-radius:200px 200px 0 0;\n\t-webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);\n\tbackground:\n\t radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom\/0% 0% no-repeat\n\t #ddd;\n\tanimation:p10 2s infinite steps(6);\n  }\n  @keyframes p10 {\n\t  100% {background-size:120% 120%}\n  }\n  \n  \/**\/\n  body {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit,minmax(250px,1fr));\n\tgrid-auto-rows: 130px;\n\tplace-items:center;\n  }\n  \n  * {\n\tbox-sizing: border-box;\n  }<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[16],"class_list":["post-1482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-loader","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1482"}],"version-history":[{"count":2,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1482\/revisions"}],"predecessor-version":[{"id":1491,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1482\/revisions\/1491"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1484"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}