Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-progress-bar — Claude Code skill: how to install

Guides AI assistants in configuring Syncfusion React progress indicators. Useful when building file upload trackers, buffer meters, and task loaders.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a claude-code
Open on GitHub

What syncfusion-react-progress-bar does

This skill equips coding assistants with implementation patterns for ProgressBarComponent from @syncfusion/ej2-react-progressbar. It covers geometry options such as Linear and Circular shapes, alongside setup guidelines for TypeScript and JavaScript React projects.

The instructions handle determinate bars with exact percentages alongside buffered displays using the secondaryProgress property. Without installing the @syncfusion/ej2-react-progressbar npm package first, the component will not render. The guidance also covers animation delays and ARIA attributes for WCAG 2.1 compliance.

What it helps with

  • render linear or circular file upload meters
  • set up indeterminate loading spinners for pending network requests
  • track media buffering with secondary progress values
  • configure custom animations and gradient fills for UI indicators

Example prompts for the agent

  • Add a linear ProgressBarComponent to show upload percentage
  • Create an indeterminate circular spinner for my dashboard
  • Configure a buffered progress bar with secondaryProgress set to 80

How to install syncfusion-react-progress-bar

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-progress-bar/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-progress-bar/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-progress-bar

How to install syncfusion-react-progress-bar in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a claude-code. Alternatively, add ~/.claude/skills/syncfusion-react-progress-bar/SKILL.md to your environment.

What component does this skill configure?

It provides guidance for ProgressBarComponent from the @syncfusion/ej2-react-progressbar library. The component supports linear, circular, and semicircular shapes.

Does it support dual or buffered progress?

Yes. You can track secondary progress by passing a value into the secondaryProgress prop on a linear bar.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set61

syncfusion-react-carousel This skill guides an agent through a Syncfusion React carousel with slides, controls, transitions, and accessibility. Use it for galleries, product displays, or slideshows. CX Codex +1 657installs syncfusion-react-sidebar Build responsive Syncfusion React sidebars for navigation layouts. Use this skill for drawer menus, nested navigation, and mobile-friendly panels. CX Codex +1 656installs syncfusion-react-timeline Tells your agent how to build event chronologies with the Syncfusion Timeline component for React. Useful for roadmaps, shipping tracking and activity feeds. CX Codex +1 655installs syncfusion-react-bullet-chart Configures Syncfusion bullet charts for React applications. Suitable for visualizing KPIs, targets, and qualitative performance bands on compact dashboards. CX Codex +1 655installs syncfusion-react-splitter This skill helps build React layouts with resizable panes, collapse controls, nested splits, and resize event handling. CX Codex +1 653installs syncfusion-react-smithchart A skill that walks your agent through building and customizing Syncfusion's React Smith Chart for impedance and RF work. CX Codex +1 652installs syncfusion-react-circular-gauge Build React circular gauges for KPIs, sensor readings, speedometers, and live monitoring dashboards with this skill. CX Codex +1 651installs syncfusion-react-3d-circular-chart A skill that walks your coding agent through building 3D pie and donut charts in React with Syncfusion components. CX Codex +1 651installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor