Progress Bar

Progress Bar

<div>
  <div id='progress-bar' style="height: 25px; padding-top: 25px;"></div>
  <div id='progress-bar-black'
    style="height: 25px; background: #000; padding-top: 25px;"></div>
  <div id='progress-bar-gray'
    style="height: 25px; background: #F0F0F0; padding-top: 25px;"></div>
</div>

import React from 'react';
import {render} from 'react-dom';
import ProgressBar from '@jetbrains/ring-ui/components/progress-bar/progress-bar';
import Theme from '@jetbrains/ring-ui/components/global/theme';

let value = 0;

setInterval(function updateProgress() {
  value = value >= 1 ? 0 : value + 0.1;

  render(
    <ProgressBar value={value}/>,
    document.getElementById('progress-bar')
  );

  render(
    <ProgressBar value={value} theme={Theme.DARK}/>,
    document.getElementById('progress-bar-black')
  );

  render(
    <ProgressBar value={value}/>,
    document.getElementById('progress-bar-gray')
  );
}, 500);