Had you ever got thought of creating a circular progress bar in swing? yes, huh. At first it sounds difficult but then when you start building it then you might found that it is very easy if you have already made an clock application. 🙂

Final result would be like this:

We will start by creating a circle animation by use of Timer and overriding paintComponent method of a JPanel:

/**
 * Circular progress bar panel.
 * @author harsh
 */
public class CircularProgressBar extends JPanel {
      private final static int MAX_PROGRESS_AMOUNT = 100;
      private static final int DELAY = 50;
      private Timer timer;
      private int prgValue = 0;

      public CircularProgressBar() {
            timer = new Timer(DELAY, new MyChangeListener());
            timer.start();
      }

      @Override
      protected void paintComponent(Graphics g) {
             Graphics2D g2 = (Graphics2D) g;
             g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
             if (prgValue <= MAX_PROGRESS_AMOUNT) {
                   g.setColor(Color.blue);
                   int angle = -(int) (((float) prgValue / MAX_PROGRESS_AMOUNT) * 360);
                   g.fillArc(0, 0, getWidth(), getHeight(), 90, angle);

            }
     }

     class MyChangeListener implements ActionListener {
         @Override
         public void actionPerformed(ActionEvent arg0) {
             prgValue++;
             repaint();
             if (prgValue >= MAX_PROGRESS_AMOUNT)
                  timer.stop();
        }
    }
}

if you run this you will see something like this:

It was easy, huh. Now the challenging part is to remove inner circular part and make it to view like first image. For that I decide to draw another circle with the same color as background. So here it is:

g2.setColor(getBackground());
g.fillArc(getWidth() / FRACTION / 2, getHeight() / FRACTION / 2,
getWidth() * (FRACTION - 1) / FRACTION, getHeight() * (FRACTION - 1) / FRACTION, 92, angle);

Add this code to paintComponent method and once again run the program. Now you will see something like in first picture.  In above code FRACTION is the width you want for your progress bar. Lesser value of fraction, wider the progress bar. One more difference in 2 fillArc method is in the start angle, in first method it is 90 and in second its 92. This difference will be width of the middle hand.

Here is the testing code:

JFrame frame = new JFrame("Circular Progress Bar by Harry Joy");
frame.add(new CircularProgressBar());
frame.setSize(350, 350);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

Hope you like it. 🙂

• Java
• Swing