🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@material/linear-progress

Package Overview
Dependencies
Maintainers
15
Versions
1675
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/linear-progress

The Material Components for the web linear progress indicator component

14.0.0
latest
Source
npm
Version published
Weekly downloads
450K
-21.35%
Maintainers
15
Weekly downloads
 
Created

What is @material/linear-progress?

@material/linear-progress is a Material Design component for displaying linear progress indicators. It provides a visual representation of the progress of a task, making it easy to integrate with React applications and ensuring a consistent look and feel with other Material Design components.

What are @material/linear-progress's main functionalities?

Indeterminate Progress

This feature allows you to display an indeterminate progress bar, which is useful when the duration of the task is unknown.

import React from 'react';
import { LinearProgress } from '@material-ui/core';

function IndeterminateProgress() {
  return <LinearProgress />;
}

export default IndeterminateProgress;

Determinate Progress

This feature allows you to display a determinate progress bar, which is useful when you can track the progress of a task.

import React, { useState } from 'react';
import { LinearProgress } from '@material-ui/core';

function DeterminateProgress() {
  const [progress, setProgress] = useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 0;
        }
        const diff = Math.random() * 10;
        return Math.min(oldProgress + diff, 100);
      });
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <LinearProgress variant="determinate" value={progress} />;
}

export default DeterminateProgress;

Buffer Progress

This feature allows you to display a buffer progress bar, which is useful when you want to show both the progress and the buffer of a task.

import React, { useState } from 'react';
import { LinearProgress } from '@material-ui/core';

function BufferProgress() {
  const [progress, setProgress] = useState(0);
  const [buffer, setBuffer] = useState(10);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 0;
        }
        const diff = Math.random() * 10;
        return Math.min(oldProgress + diff, 100);
      });
      setBuffer((oldBuffer) => {
        if (oldBuffer === 100) {
          return 10;
        }
        const diff = Math.random() * 10;
        return Math.min(oldBuffer + diff, 100);
      });
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <LinearProgress variant="buffer" value={progress} valueBuffer={buffer} />;
}

export default BufferProgress;

Query Progress

This feature allows you to display a query progress bar, which is useful when you want to indicate that a task is being queried.

import React from 'react';
import { LinearProgress } from '@material-ui/core';

function QueryProgress() {
  return <LinearProgress variant="query" />;
}

export default QueryProgress;

Other packages similar to @material/linear-progress

    react-loader-spinner

    react-loader-spinner provides a collection of customizable loading spinners for React applications. It offers a variety of spinner types, including linear progress bars, and is highly customizable in terms of size, color, and animation speed. Compared to @material/linear-progress, it provides more variety in loading indicators but may not adhere strictly to Material Design guidelines.

    react-progressbar.js

    react-progressbar.js is a React wrapper for ProgressBar.js, a library for creating animated progress bars. It supports linear and circular progress bars with customizable animations and styles. While it offers more animation options compared to @material/linear-progress, it may require more effort to integrate seamlessly with Material Design components.

    nprogress

    nprogress is a simple and lightweight progress bar library for web applications. It is often used for indicating page load progress and can be easily integrated with React. However, it lacks the variety of progress bar types and customization options available in @material/linear-progress.

Keywords

material components
material design
linear progress

FAQs

Package last updated on 28 Apr 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials

Research

PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials

A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.

By Kush Pandya  -  Jun 06, 2025
Socket Now Supports pylock.toml Files

Product

Socket Now Supports pylock.toml Files

Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.

By Trevor Norris  -  Jun 05, 2025