Con uses bootstrap-like progress bars.

Basic

<div class="progress">
  <div class="white-text" style="width: 40%"></div>
</div>

With label

Just add your text inside inner div.
40%
<div class="progress">
  <div class="white-text" style="width: 40%">40%</div>
</div>

Sizes

Mid
Big
Extra
<div class="progress tiny">
  <div class="white-text" style="width: 40%"></div>
</div>
<div class="progress small">
  <div class="white-text" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="white-text" style="width: 40%">Mid</div>
</div>
<div class="progress big">
  <div class="white-text" style="width: 40%">Big</div>
</div>
<div class="progress extra">
  <div class="white-text" style="width: 40%">Extra</div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE8. To change colors, use this page css-colors.html
40%
20%
70%
55%
90%
10%
<div class="progress">
  <div class="striped" style="width: 40%">
    40%
  </div>
</div>
<div class="progress">
  <div class="striped red" style="width: 20%">
    20%
  </div>
</div>
<div class="progress">
  <div class="striped purple" style="width: 70%">
    70%
  </div>
</div>
<div class="progress cyan lighten-4">
  <div class="striped cyan" style="width: 55%">
    55%
  </div>
</div>
<div class="progress green lighten-4">
  <div class="striped green" style="width: 90%">
    90%
  </div>
</div>
<div class="progress amber lighten-4">
  <div class="striped amber" style="width: 10%">
    10%
  </div>
</div>

Animated

To use animated version - add .active class on child container.
40%
<div class="progress">
  <div class="active striped orange" style="width: 40%">
    40%
  </div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.
<div class="progress grey lighten-2">
  <div class="green" style="width: 35%"></div>
  <div class="purple striped" style="width: 20%"></div>
  <div class="red" style="width: 10%"></div>
</div>

Indeterminate

<div class="progress">
  <div class="indeterminate"></div>
</div>

Circular

<div class="preloader-wrapper big active">
  <div class="spinner-layer spinner-blue">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>

  <div class="spinner-layer spinner-red">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>

  <div class="spinner-layer spinner-yellow">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>

  <div class="spinner-layer spinner-green">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>
</div>
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John Doe Hi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John Doe Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John Doe Hi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John Doe I do not use Facebook. But you can follow me in Twitter.
It's good idea!
John Doe You can find me here - https://twitter.com/nkdevv