{"id":1631,"date":"2023-07-07T14:23:07","date_gmt":"2023-07-07T11:23:07","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1631"},"modified":"2023-07-07T14:23:08","modified_gmt":"2023-07-07T11:23:08","slug":"animated-star-rating","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/1631\/","title":{"rendered":"Animated Star Rating"},"content":{"rendered":"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"536\" height=\"254\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/07\/peek-2023-07-07-13-20.gif\" alt=\"\" class=\"wp-image-1632 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;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500&amp;amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, viewport-fit=cover&quot;&gt;\n\n  &lt;form class=&quot;rating&quot;&gt;\n    &lt;div class=&quot;rating__stars&quot;&gt;\n      &lt;input id=&quot;rating-1&quot; class=&quot;rating__input rating__input-1&quot; type=&quot;radio&quot; name=&quot;rating&quot; value=&quot;1&quot;&gt;\n      &lt;input id=&quot;rating-2&quot; class=&quot;rating__input rating__input-2&quot; type=&quot;radio&quot; name=&quot;rating&quot; value=&quot;2&quot;&gt;\n      &lt;input id=&quot;rating-3&quot; class=&quot;rating__input rating__input-3&quot; type=&quot;radio&quot; name=&quot;rating&quot; value=&quot;3&quot;&gt;\n      &lt;input id=&quot;rating-4&quot; class=&quot;rating__input rating__input-4&quot; type=&quot;radio&quot; name=&quot;rating&quot; value=&quot;4&quot;&gt;\n      &lt;input id=&quot;rating-5&quot; class=&quot;rating__input rating__input-5&quot; type=&quot;radio&quot; name=&quot;rating&quot; value=&quot;5&quot;&gt;\n      &lt;label class=&quot;rating__label&quot; for=&quot;rating-1&quot;&gt;\n        &lt;svg class=&quot;rating__star&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 32 32&quot; aria-hidden=&quot;true&quot;&gt;\n          &lt;g transform=&quot;translate(16,16)&quot;&gt;\n            &lt;circle class=&quot;rating__star-ring&quot; fill=&quot;none&quot; stroke=&quot;#000&quot; stroke-width=&quot;16&quot; r=&quot;8&quot; transform=&quot;scale(0)&quot; \/&gt;\n          &lt;\/g&gt;\n          &lt;g stroke=&quot;#000&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n            &lt;g transform=&quot;translate(16,16) rotate(180)&quot;&gt;\n              &lt;polygon class=&quot;rating__star-stroke&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;none&quot; \/&gt;\n              &lt;polygon class=&quot;rating__star-fill&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;#000&quot; \/&gt;\n            &lt;\/g&gt;\n            &lt;g transform=&quot;translate(16,16)&quot; stroke-dasharray=&quot;12 12&quot; stroke-dashoffset=&quot;12&quot;&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(0)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(72)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(144)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(216)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(288)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n            &lt;\/g&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n        &lt;span class=&quot;rating__sr&quot;&gt;1 star\u2014Terrible&lt;\/span&gt;\n      &lt;\/label&gt;\n      &lt;label class=&quot;rating__label&quot; for=&quot;rating-2&quot;&gt;\n        &lt;svg class=&quot;rating__star&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 32 32&quot; aria-hidden=&quot;true&quot;&gt;\n          &lt;g transform=&quot;translate(16,16)&quot;&gt;\n            &lt;circle class=&quot;rating__star-ring&quot; fill=&quot;none&quot; stroke=&quot;#000&quot; stroke-width=&quot;16&quot; r=&quot;8&quot; transform=&quot;scale(0)&quot; \/&gt;\n          &lt;\/g&gt;\n          &lt;g stroke=&quot;#000&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n            &lt;g transform=&quot;translate(16,16) rotate(180)&quot;&gt;\n              &lt;polygon class=&quot;rating__star-stroke&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;none&quot; \/&gt;\n              &lt;polygon class=&quot;rating__star-fill&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;#000&quot; \/&gt;\n            &lt;\/g&gt;\n            &lt;g transform=&quot;translate(16,16)&quot; stroke-dasharray=&quot;12 12&quot; stroke-dashoffset=&quot;12&quot;&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(0)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(72)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(144)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(216)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(288)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n            &lt;\/g&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n        &lt;span class=&quot;rating__sr&quot;&gt;2 stars\u2014Bad&lt;\/span&gt;\n      &lt;\/label&gt;\n      &lt;label class=&quot;rating__label&quot; for=&quot;rating-3&quot;&gt;\n        &lt;svg class=&quot;rating__star&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 32 32&quot; aria-hidden=&quot;true&quot;&gt;\n          &lt;g transform=&quot;translate(16,16)&quot;&gt;\n            &lt;circle class=&quot;rating__star-ring&quot; fill=&quot;none&quot; stroke=&quot;#000&quot; stroke-width=&quot;16&quot; r=&quot;8&quot; transform=&quot;scale(0)&quot; \/&gt;\n          &lt;\/g&gt;\n          &lt;g stroke=&quot;#000&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n            &lt;g transform=&quot;translate(16,16) rotate(180)&quot;&gt;\n              &lt;polygon class=&quot;rating__star-stroke&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;none&quot; \/&gt;\n              &lt;polygon class=&quot;rating__star-fill&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;#000&quot; \/&gt;\n            &lt;\/g&gt;\n            &lt;g transform=&quot;translate(16,16)&quot; stroke-dasharray=&quot;12 12&quot; stroke-dashoffset=&quot;12&quot;&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(0)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(72)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(144)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(216)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(288)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n            &lt;\/g&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n        &lt;span class=&quot;rating__sr&quot;&gt;3 stars\u2014OK&lt;\/span&gt;\n      &lt;\/label&gt;\n      &lt;label class=&quot;rating__label&quot; for=&quot;rating-4&quot;&gt;\n        &lt;svg class=&quot;rating__star&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 32 32&quot; aria-hidden=&quot;true&quot;&gt;\n          &lt;g transform=&quot;translate(16,16)&quot;&gt;\n            &lt;circle class=&quot;rating__star-ring&quot; fill=&quot;none&quot; stroke=&quot;#000&quot; stroke-width=&quot;16&quot; r=&quot;8&quot; transform=&quot;scale(0)&quot; \/&gt;\n          &lt;\/g&gt;\n          &lt;g stroke=&quot;#000&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n            &lt;g transform=&quot;translate(16,16) rotate(180)&quot;&gt;\n              &lt;polygon class=&quot;rating__star-stroke&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;none&quot; \/&gt;\n              &lt;polygon class=&quot;rating__star-fill&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;#000&quot; \/&gt;\n            &lt;\/g&gt;\n            &lt;g transform=&quot;translate(16,16)&quot; stroke-dasharray=&quot;12 12&quot; stroke-dashoffset=&quot;12&quot;&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(0)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(72)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(144)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(216)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(288)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n            &lt;\/g&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n        &lt;span class=&quot;rating__sr&quot;&gt;4 stars\u2014Good&lt;\/span&gt;\n      &lt;\/label&gt;\n      &lt;label class=&quot;rating__label&quot; for=&quot;rating-5&quot;&gt;\n        &lt;svg class=&quot;rating__star&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 32 32&quot; aria-hidden=&quot;true&quot;&gt;\n          &lt;g transform=&quot;translate(16,16)&quot;&gt;\n            &lt;circle class=&quot;rating__star-ring&quot; fill=&quot;none&quot; stroke=&quot;#000&quot; stroke-width=&quot;16&quot; r=&quot;8&quot; transform=&quot;scale(0)&quot; \/&gt;\n          &lt;\/g&gt;\n          &lt;g stroke=&quot;#000&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n            &lt;g transform=&quot;translate(16,16) rotate(180)&quot;&gt;\n              &lt;polygon class=&quot;rating__star-stroke&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;none&quot; \/&gt;\n              &lt;polygon class=&quot;rating__star-fill&quot; points=&quot;0,15 4.41,6.07 14.27,4.64 7.13,-2.32 8.82,-12.14 0,-7.5 -8.82,-12.14 -7.13,-2.32 -14.27,4.64 -4.41,6.07&quot; fill=&quot;#000&quot; \/&gt;\n            &lt;\/g&gt;\n            &lt;g transform=&quot;translate(16,16)&quot; stroke-dasharray=&quot;12 12&quot; stroke-dashoffset=&quot;12&quot;&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(0)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(72)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(144)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(216)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n              &lt;polyline class=&quot;rating__star-line&quot; transform=&quot;rotate(288)&quot; points=&quot;0 4,0 16&quot; \/&gt;\n            &lt;\/g&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n        &lt;span class=&quot;rating__sr&quot;&gt;5 stars\u2014Excellent&lt;\/span&gt;\n      &lt;\/label&gt;\n      &lt;p class=&quot;rating__display&quot; data-rating=&quot;1&quot; hidden&gt;Terrible&lt;\/p&gt;\n      &lt;p class=&quot;rating__display&quot; data-rating=&quot;2&quot; hidden&gt;Bad&lt;\/p&gt;\n      &lt;p class=&quot;rating__display&quot; data-rating=&quot;3&quot; hidden&gt;OK&lt;\/p&gt;\n      &lt;p class=&quot;rating__display&quot; data-rating=&quot;4&quot; hidden&gt;Good&lt;\/p&gt;\n      &lt;p class=&quot;rating__display&quot; data-rating=&quot;5&quot; hidden&gt;Excellent&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/form&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;}\">* {\n  border: 0;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:root {\n  --bg: #e3e4e8;\n  --fg: #17181c;\n  --primary: #255ff4;\n  --yellow: #f4a825;\n  --yellow-t: rgba(244, 168, 37, 0);\n  --bezier: cubic-bezier(0.42,0,0.58,1);\n  --trans-dur: 0.3s;\n  font-size: calc(24px + (30 - 24) * (100vw - 320px) \/ (1280 - 320));\n}\n\nbody {\n  background-color: var(--bg);\n  color: var(--fg);\n  font: 1em\/1.5 &quot;DM Sans&quot;, sans-serif;\n  display: flex;\n  height: 100vh;\n  transition: background-color var(--trans-dur), color var(--trans-dur);\n}\n\n.rating {\n  margin: auto;\n}\n.rating__display {\n  font-size: 1em;\n  font-weight: 500;\n  min-height: 1.25em;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  text-align: center;\n}\n.rating__stars {\n  display: flex;\n  padding-bottom: 0.375em;\n  position: relative;\n}\n.rating__star {\n  display: block;\n  overflow: visible;\n  pointer-events: none;\n  width: 2em;\n  height: 2em;\n}\n.rating__star-ring, .rating__star-fill, .rating__star-line, .rating__star-stroke {\n  animation-duration: 1s;\n  animation-timing-function: ease-in-out;\n  animation-fill-mode: forwards;\n}\n.rating__star-ring, .rating__star-fill, .rating__star-line {\n  stroke: var(--yellow);\n}\n.rating__star-fill {\n  fill: var(--yellow);\n  transform: scale(0);\n  transition: fill var(--trans-dur) var(--bezier), transform var(--trans-dur) var(--bezier);\n}\n.rating__star-stroke {\n  stroke: #c7cad1;\n  transition: stroke var(--trans-dur);\n}\n.rating__label {\n  cursor: pointer;\n  padding: 0.125em;\n}\n.rating__label--delay1 .rating__star-ring, .rating__label--delay1 .rating__star-fill, .rating__label--delay1 .rating__star-line, .rating__label--delay1 .rating__star-stroke {\n  animation-delay: 0.05s;\n}\n.rating__label--delay2 .rating__star-ring, .rating__label--delay2 .rating__star-fill, .rating__label--delay2 .rating__star-line, .rating__label--delay2 .rating__star-stroke {\n  animation-delay: 0.1s;\n}\n.rating__label--delay3 .rating__star-ring, .rating__label--delay3 .rating__star-fill, .rating__label--delay3 .rating__star-line, .rating__label--delay3 .rating__star-stroke {\n  animation-delay: 0.15s;\n}\n.rating__label--delay4 .rating__star-ring, .rating__label--delay4 .rating__star-fill, .rating__label--delay4 .rating__star-line, .rating__label--delay4 .rating__star-stroke {\n  animation-delay: 0.2s;\n}\n.rating__input {\n  -webkit-appearance: none;\n  appearance: none;\n}\n.rating__input:hover ~ [data-rating]:not([hidden]) {\n  display: none;\n}\n.rating__input-1:hover ~ [data-rating=&quot;1&quot;][hidden], .rating__input-2:hover ~ [data-rating=&quot;2&quot;][hidden], .rating__input-3:hover ~ [data-rating=&quot;3&quot;][hidden], .rating__input-4:hover ~ [data-rating=&quot;4&quot;][hidden], .rating__input-5:hover ~ [data-rating=&quot;5&quot;][hidden], .rating__input:checked:hover ~ [data-rating]:not([hidden]) {\n  display: block;\n}\n.rating__input-1:hover ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:hover ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:hover ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:hover ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:hover ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {\n  stroke: var(--yellow);\n  transform: scale(1);\n}\n.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-ring, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-ring, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-ring, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-ring, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-ring {\n  animation-name: starRing;\n}\n.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {\n  animation-name: starStroke;\n}\n.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-line, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-line, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-line, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-line, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-line {\n  animation-name: starLine;\n}\n.rating__input-1:checked ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-fill, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-fill, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-fill, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-fill {\n  animation-name: starFill;\n}\n.rating__input-1:not(:checked):hover ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:not(:checked):hover ~ .rating__label:nth-of-type(2) .rating__star-fill, .rating__input-3:not(:checked):hover ~ .rating__label:nth-of-type(3) .rating__star-fill, .rating__input-4:not(:checked):hover ~ .rating__label:nth-of-type(4) .rating__star-fill, .rating__input-5:not(:checked):hover ~ .rating__label:nth-of-type(5) .rating__star-fill {\n  fill: var(--yellow-t);\n}\n.rating__sr {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #17181c;\n    --fg: #e3e4e8;\n  }\n\n  .rating {\n    margin: auto;\n  }\n  .rating__star-stroke {\n    stroke: #454954;\n  }\n}\n@keyframes starRing {\n  from, 20% {\n    animation-timing-function: ease-in;\n    opacity: 1;\n    r: 8px;\n    stroke-width: 16px;\n    transform: scale(0);\n  }\n  35% {\n    animation-timing-function: ease-out;\n    opacity: 0.5;\n    r: 8px;\n    stroke-width: 16px;\n    transform: scale(1);\n  }\n  50%, to {\n    opacity: 0;\n    r: 16px;\n    stroke-width: 0;\n    transform: scale(1);\n  }\n}\n@keyframes starFill {\n  from, 40% {\n    animation-timing-function: ease-out;\n    transform: scale(0);\n  }\n  60% {\n    animation-timing-function: ease-in-out;\n    transform: scale(1.2);\n  }\n  80% {\n    transform: scale(0.9);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n@keyframes starStroke {\n  from {\n    transform: scale(1);\n  }\n  20%, to {\n    transform: scale(0);\n  }\n}\n@keyframes starLine {\n  from, 40% {\n    animation-timing-function: ease-out;\n    stroke-dasharray: 1 23;\n    stroke-dashoffset: 1;\n  }\n  60%, to {\n    stroke-dasharray: 12 12;\n    stroke-dashoffset: -12;\n  }\n}<\/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;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&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;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">window.addEventListener(&quot;DOMContentLoaded&quot;,() =&gt; {\n\tconst starRating = new StarRating(&quot;form&quot;);\n});\n\nclass StarRating {\n\tconstructor(qs) {\n\t\tthis.ratings = [\n\t\t\t{id: 1, name: &quot;Terrible&quot;},\n\t\t\t{id: 2, name: &quot;Bad&quot;},\n\t\t\t{id: 3, name: &quot;OK&quot;},\n\t\t\t{id: 4, name: &quot;Good&quot;},\n\t\t\t{id: 5, name: &quot;Excellent&quot;}\n\t\t];\n\t\tthis.rating = null;\n\t\tthis.el = document.querySelector(qs);\n\n\t\tthis.init();\n\t}\n\tinit() {\n\t\tthis.el?.addEventListener(&quot;change&quot;,this.updateRating.bind(this));\n\n\t\t\/\/ stop Firefox from preserving form data between refreshes\n\t\ttry {\n\t\t\tthis.el?.reset();\n\t\t} catch (err) {\n\t\t\tconsole.error(&quot;Element isn't a form.&quot;);\n\t\t}\n\t}\n\tupdateRating(e) {\n\t\t\/\/ clear animation delays\n\t\tArray.from(this.el.querySelectorAll(`[for*=&quot;rating&quot;]`)).forEach(el =&gt; {\n\t\t\tel.className = &quot;rating__label&quot;;\n\t\t});\n\n\t\tconst ratingObject = this.ratings.find(r =&gt; r.id === +e.target.value);\n\t\tconst prevRatingID = this.rating?.id || 0;\n\n\t\tlet delay = 0;\n\t\tthis.rating = ratingObject;\n\t\tthis.ratings.forEach(rating =&gt; {\n\t\t\tconst { id } = rating;\n\n\t\t\t\/\/ add the delays\n\t\t\tconst ratingLabel = this.el.querySelector(`[for=&quot;rating-${id}&quot;]`);\n\n\t\t\tif (id &gt; prevRatingID + 1 &amp;&amp; id &lt;= this.rating.id) {\n\t\t\t\t++delay;\n\t\t\t\tratingLabel.classList.add(`rating__label--delay${delay}`);\n\t\t\t}\n\n\t\t\t\/\/ hide ratings to not read, show the one to read\n\t\t\tconst ratingTextEl = this.el.querySelector(`[data-rating=&quot;${id}&quot;]`);\n\n\t\t\tif (this.rating.id !== id)\n\t\t\t\tratingTextEl.setAttribute(&quot;hidden&quot;,true);\n\t\t\telse\n\t\t\t\tratingTextEl.removeAttribute(&quot;hidden&quot;);\n\t\t});\n\t}\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1632,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-1631","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1631","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=1631"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1631\/revisions"}],"predecessor-version":[{"id":1633,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1631\/revisions\/1633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1632"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}