{"id":213,"date":"2026-11-02T04:51:12","date_gmt":"2026-11-02T04:51:12","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=213"},"modified":"2026-11-02T04:51:16","modified_gmt":"2026-11-02T04:51:16","slug":"8-copy-paste-loading-state-snippets-that-make-waiting-feel-faster","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/8-copy-paste-loading-state-snippets-that-make-waiting-feel-faster\/","title":{"rendered":"8 Copy-Paste Loading State Snippets That Make Waiting Feel Faster"},"content":{"rendered":"<p><!--\n================================================================\n  POST TITLE (paste into the WordPress title field \u2014 it becomes the page H1)\n  8 Copy-Paste Loading State Snippets That Make Waiting Feel Faster\n\n  SEO TITLE (59 chars, target 50\u201360, max 60 \u2014 \"Optimize SEO\" panel \u2192 SEO TITLE)\n  8 Loading State Snippets: Skeleton Screens, Spinners & More\n\n  SEO DESCRIPTION (158 chars, target 150\u2013160, max 160 \u2014 \"Optimize SEO\" panel \u2192 SEO DESCRIPTION)\n  8 free loading state snippets, from skeleton screens to spinners and progress bars, that make waiting feel faster. Preview live and copy the HTML, CSS and JS.\n================================================================\n--><\/p>\n\n\n<p class=\"wp-block-paragraph\">Every app makes users wait \u2014 for an API response, a page navigation, a file upload, an AI answer. What separates a polished product from a janky one isn&#8217;t the wait itself, it&#8217;s what&#8217;s on screen during it. A blank white page and a well-built skeleton screen can cover the exact same 800&nbsp;ms, and one feels instant while the other feels broken. Below are 8 free loading state snippets \u2014 shimmer skeletons, a YouTube-style top bar, animated progress rings, a drag-and-drop upload with real per-file percentages \u2014 you can preview live and copy in seconds. Pure HTML, CSS and a few lines of JS, no framework required.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As with every roundup in this series, this isn&#8217;t just a copy-paste dump. For each snippet you&#8217;ll find <strong>how it actually works<\/strong> under the hood, <strong>when to reach for it<\/strong> (and when it&#8217;s the wrong call), and a quick tip for customising or keeping it accessible. By the end you&#8217;ll know the small toolkit \u2014 <code>background-position<\/code> shimmers, <code>stroke-dashoffset<\/code> maths, the NProgress &#8220;trickle&#8221; model, staggered <code>animation-delay<\/code> \u2014 behind nearly every loading state you&#8217;ve ever admired.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every snippet below is a <strong>live, running preview<\/strong> \u2014 watch it right in the article. When you find one you like, hit <strong>View \/ Edit Code<\/strong> to grab the HTML\/CSS\/JS or export it to React, Vue, Angular or Tailwind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The one rule of loading states: match the wait<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before copying anything, it helps to know which <em>kind<\/em> of loading state a situation calls for. Get this wrong and even a beautiful animation feels off:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Under ~300&nbsp;ms<\/strong> \u2014 show nothing. A spinner that flashes for a tenth of a second reads as flicker, not feedback.<\/li>\n\n\n\n<li><strong>Unknown duration, known layout<\/strong> \u2014 use a <strong>skeleton screen<\/strong>. It previews the structure the user is about to receive, which is why Facebook, LinkedIn and YouTube all use them.<\/li>\n\n\n\n<li><strong>Unknown duration, unknown layout<\/strong> \u2014 use an <strong>indeterminate spinner or top bar<\/strong>. It only says &#8220;we&#8217;re working&#8221;, which is all you honestly know.<\/li>\n\n\n\n<li><strong>Known progress<\/strong> (upload percentage, steps completed) \u2014 use a <strong>determinate bar or ring<\/strong>. If you have a real number, show the real number.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">One more rule that applies to all eight: when you drop any of these into production, give the loader <code>role=\"status\"<\/code> and an <code>aria-label<\/code> so screen readers announce that content is loading, and wrap the animation in a <code>prefers-reduced-motion<\/code> media query for users who opt out of motion. It&#8217;s two lines, and it&#8217;s the difference between decorative and accessible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Skeleton Loader \u2014 the shimmer everyone recognises<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/skeleton-loader\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Skeleton Loader \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> every placeholder shares one class with a horizontal <code>linear-gradient<\/code> \u2014 grey, brighter in the middle, grey again \u2014 stretched to <code>background-size: 200% 100%<\/code> so only half is visible at once. A single keyframe animates <code>background-position<\/code> from <code>200% 0<\/code> to <code>-200% 0<\/code>, sweeping the bright band across the element. That&#8217;s the entire shimmer: no JavaScript, no extra elements, and because <code>background-position<\/code> doesn&#8217;t trigger layout or paint, you can animate dozens of skeletons at once with no performance cost.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> any card, list or profile whose layout you know before the data arrives. The snippet ships composable shape utilities \u2014 a circle for avatars, a tall block for images, thin strips of varying widths for text lines \u2014 so you can mirror your real component in a few divs. <strong>Tip:<\/strong> vary the line widths (60%, 40%, 80%\u2026) \u2014 uniform full-width bars look like a wireframe, varied ones read as &#8220;text is coming&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/skeleton-loader\/\">Skeleton Loader<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Skeleton Card Grid \u2014 the skeleton-to-content swap, done right<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/skeleton-card-grid\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Skeleton Card Grid \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> this one demonstrates the part most skeleton tutorials skip \u2014 the handoff. A product grid renders six shimmering placeholder cards, then after the simulated fetch resolves, swaps in the real cards with a short fade-and-rise animation (<code>opacity<\/code> plus a 6px <code>translateY<\/code>). Because the skeleton cards have the same dimensions as the real ones, the grid doesn&#8217;t jump when content lands \u2014 no layout shift, which is exactly what Google&#8217;s CLS metric punishes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> product listings, search results, dashboards \u2014 anywhere a grid of items loads from an API. <strong>Tip:<\/strong> render the same number of skeletons as the items you typically expect. Showing 3 placeholders and delivering 20 results (or the reverse) breaks the illusion that the skeleton was a preview.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/skeleton-card-grid\/\">Skeleton Card Grid<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Top Loading Bar \u2014 the YouTube\/GitHub trickle<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/top-loading-bar\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Top Loading Bar \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the thin bar that slides across the top of the page during navigation solves an honest problem: you <em>can&#8217;t know<\/em> how long a request will take, so a real percentage is impossible. The trick \u2014 popularised by the NProgress library \u2014 is the <strong>trickle model<\/strong>. On start, the bar jumps to 8%, then a timer nudges it upward by a shrinking amount every 400&nbsp;ms, easing toward but never passing 90%. It races early and slows near the top, conveying activity without ever pretending to be done. When the real work finishes, it snaps to 100% and fades out. The width itself is animated with <code>requestAnimationFrame<\/code> easing so the motion stays silky, and a glowing &#8220;peg&#8221; via <code>box-shadow<\/code> on the leading edge gives it that signature comet look.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> route changes in single-page apps and background fetches that shouldn&#8217;t block the UI. It occupies zero layout space, so the page stays fully usable underneath. <strong>Tip:<\/strong> wire <code>startBar()<\/code> to your router&#8217;s navigation-start event and <code>finishBar()<\/code> to its complete event \u2014 the trickle handles everything in between.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/top-loading-bar\/\">Top Loading Bar<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Loading Button \u2014 the loading state users trigger themselves<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/loading-button\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Loading Button \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the most common loading state isn&#8217;t a page load \u2014 it&#8217;s the moment after a user clicks <em>Save<\/em>. This button swaps its label to &#8220;Saving\u2026&#8221;, reveals a tiny inline spinner (a circle with a semi-transparent border and one solid white segment, rotated by a single keyframe), blocks double-clicks with a class guard, then lands on a green &#8220;\u2713 Saved!&#8221; confirmation before resetting. Three states \u2014 idle, loading, done \u2014 driven by two CSS classes and a few lines of JS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> every form submit, save action and checkout button you ship. Feedback at the point of interaction beats a global spinner because the user&#8217;s eye is already there. <strong>Tip:<\/strong> the <code>min-width<\/code> on the button matters more than it looks \u2014 it stops the button resizing when the label changes, which would otherwise shift everything around it mid-click.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/loading-button\/\">Loading Button<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Dots Loader \u2014 four variants from one technique<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/dots-loader\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Dots Loader \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> bounce, pulse, wave and an elastic ring \u2014 all built on one idea: give every dot the <em>same<\/em> animation, then offset each with <code>animation-delay: 0.2s \u00d7 its index<\/code>. The stagger is what turns identical keyframes into a travelling wave. The bounce variant pairs <code>translateY<\/code> with an opacity dip so dots &#8220;light up&#8221; at the top of their arc; the wave variant stretches bars instead of moving circles; and a bonus button shows the dots working as an inline busy indicator.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> chat &#8220;typing\u2026&#8221; indicators, inline waits inside cards and buttons, anywhere a full skeleton is overkill. Dots are the smallest polite loader there is. <strong>Tip:<\/strong> keep the loop between 1.2 and 1.5 seconds \u2014 faster reads as frantic, slower reads as stalled.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/dots-loader\/\">Dots Loader<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. SVG Progress Ring \u2014 the stroke-dashoffset classic<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/svg-progress-ring\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"SVG Progress Ring \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the circular progress ring you see in Lighthouse scores and fitness apps is one SVG trick. A circle&#8217;s <code>stroke-dasharray<\/code> is set to its exact circumference (2\u03c0r \u2248 251.2 for a radius of 40), which makes the entire outline one dash. <code>stroke-dashoffset<\/code> then hides part of that dash \u2014 offset by the full circumference and the ring is empty; offset by <code>circumference \u00d7 (1 \u2212 pct\/100)<\/code> and exactly <em>pct<\/em> percent is drawn. A CSS <code>transition<\/code> on the offset animates the sweep, the SVG is rotated \u221290\u00b0 so progress starts at 12 o&#8217;clock, and a small JS counter animates the percentage label in sync.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> scores, completion percentages, step progress \u2014 any <em>determinate<\/em> value where the number is the story. <strong>Tip:<\/strong> <code>stroke-linecap: round<\/code> is the difference between &#8220;developer drew a circle&#8221; and &#8220;designer made a gauge&#8221; \u2014 it rounds the sweep&#8217;s ends so the ring feels finished.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/svg-progress-ring\/\">SVG Progress Ring<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. CSS Loader Gallery \u2014 eight spinners, zero JavaScript, click to copy<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/css-loader-gallery\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"CSS Loader Gallery \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> a grid of eight pure-CSS loaders \u2014 classic spinner, bouncing dots, pulse ring, shimmer skeleton, orbit, indeterminate progress bar, square grid, typing cursor \u2014 each one a self-contained few lines of CSS. The classic spinner is the oldest trick in the book: a circle with a light border, one segment recoloured via <code>border-top-color<\/code>, rotated forever. The pulse ring scales up while fading out. The square grid is nine cells sharing one fade keyframe with delays incremented by 0.1s so a lit wave sweeps across. Click any card and its minified, standalone CSS lands on your clipboard with a toast confirmation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> the &#8220;I just need a spinner, now&#8221; moments \u2014 no library, no SVG asset, no dependency audit. Because every loader is pure CSS, each costs a single element and keeps animating even when the main thread is busy. <strong>Tip:<\/strong> the border-top spinner is three lines of CSS; if you&#8217;re about to install a spinner package, paste this instead.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/css-loader-gallery\/\">CSS Loader Gallery<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Upload Progress \u2014 real percentages, per file<\/h2>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/upload-progress\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Upload Progress \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the one loading state where you <em>do<\/em> have real numbers, done properly. A dashed drop zone accepts drag-and-drop or click-to-browse, then renders a row per file \u2014 an icon picked by extension, the filename, a formatted size, and a thin progress bar whose fill animates via a CSS <code>transition<\/code> on <code>width<\/code>, so each JS update glides instead of jumping. Every file tracks its own percentage while a summary bar at the bottom aggregates them all into one overall figure, and finished files flip to a green &#8220;done&#8221; state. Removing a file mid-upload cancels its ticker \u2014 a small detail most implementations forget.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use it:<\/strong> any multi-file upload \u2014 avatars, attachments, media libraries. Users tolerate long uploads when they can see per-file movement; a single frozen spinner over a 40&nbsp;MB upload is where trust goes to die. <strong>Tip:<\/strong> the demo simulates progress with timers \u2014 swap those for <code>XMLHttpRequest<\/code>&#8216;s <code>upload.onprogress<\/code> event and the same rendering code shows real network percentages unchanged.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try it: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/upload-progress\/\">Upload Progress<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The techniques you just collected<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eight snippets, but really five reusable ideas \u2014 the same handful that power almost every loading state on the modern web:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The background-position shimmer<\/strong> \u2014 an oversized gradient swept across an element. Powers both skeletons and the gallery&#8217;s skeleton card, and it&#8217;s compositor-friendly, so it scales to dozens of elements.<\/li>\n\n\n\n<li><strong>Staggered <code>animation-delay<\/code><\/strong> \u2014 identical keyframes offset per element to create waves. Powers the dots loader and the gallery&#8217;s square grid.<\/li>\n\n\n\n<li><strong><code>stroke-dasharray<\/code> \/ <code>stroke-dashoffset<\/code><\/strong> \u2014 draw exactly <em>n<\/em> percent of any SVG path. Powers the progress ring and every animated checkmark you&#8217;ve ever seen.<\/li>\n\n\n\n<li><strong>The trickle model<\/strong> \u2014 fake confident progress toward 90%, then complete on real success. The honest way to show progress you can&#8217;t measure.<\/li>\n\n\n\n<li><strong>Transition-smoothed JS updates<\/strong> \u2014 set <code>width<\/code> from JavaScript, let a CSS <code>transition<\/code> do the easing. Powers the upload bars and the loading button&#8217;s state changes.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thought<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Users forgive waiting; they don&#8217;t forgive wondering whether anything is happening. Pick the state that matches what you actually know \u2014 skeleton for known layouts, trickle bar for unknown durations, ring for real percentages \u2014 and the same app suddenly feels faster without a single backend change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All eight snippets live in the free <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/\">webdevpuneet UI snippet gallery<\/a> \u2014 preview them live, edit the code in the browser, and export to React, Vue, Angular or Tailwind. And if you missed the earlier roundups in this series, they cover <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/buttons\/\">copy-paste button snippets<\/a>, <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/cards\/\">hover card snippets<\/a> and <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/animations\/\">text effect snippets<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every app makes users wait \u2014 for an API response, a page navigation, a file upload, an AI answer. What separates a polished product from a janky one isn&#8217;t the wait itself, it&#8217;s what&#8217;s on screen during it. A blank white page and a well-built skeleton screen can cover the exact same 800&nbsp;ms, and one [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","advanced_seo_description":"8 free loading state snippets, from skeleton screens to spinners and progress bars, that make waiting feel faster. Preview live and copy the HTML, CSS and JS.","jetpack_seo_html_title":"8 Loading State Snippets: Skeleton Screens, Spinners & More","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"8 free loading state snippets to make waiting feel faster!\n\nExplore skeleton screens, spinners, progress bars and more. Preview them live and copy the HTML, CSS & JavaScript.\n\nFree to use. Ready to customize!\n\n#WebDev #CSS #UIDesign\n","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[14],"tags":[],"class_list":["post-213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-snippets","et-has-post-format-content","et_post_format-et-post-format-standard"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phrh5V-3r","jetpack_featured_media_url":"https:\/\/i0.wp.com\/webdevpuneet.com\/blog\/wp-content\/uploads\/2026\/11\/webdevpuneet-loading-state-1200x630-1.webp?fit=1200%2C630&ssl=1","_links":{"self":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":2,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/213\/revisions\/216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media\/215"}],"wp:attachment":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}