Linear

There are a couple different types of linear progress bars.

determinate

                                                            
                                                                <div class="progress">
                                                                    <div class="determinate" style="width: 70%"></div>
                                                                </div>
                                                            
                    

indeterminate

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

Circular

There are 4 colors and 3 sizes of circular spinners. The spinner should be nested in a preloader-wrapper div. The default size is medium, but you can add the classes big or small to adjust the size accordingly. You can add the classes spinner-red-only, spinner-blue-only, spinner-yellow-only and spinner-green-only. You can also leave this class as just spinner-layer and it will be set to the $spinner-default-color variable in our variables.scss file.

Colors

                                                            
                                                                <div class="preloader-wrapper big active">
                                                                    <div class="spinner-layer spinner-blue-only">
                                                                        <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>
                                                                <div class="preloader-wrapper active">
                                                                    <div class="spinner-layer spinner-red-only">
                                                                        <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>
                                                                <div class="preloader-wrapper small active">
                                                                    <div class="spinner-layer spinner-green-only">
                                                                        <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>
                                                            
                    

Circular Flashing Colors

                                                            
                                                                <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>