Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Thursday 5 January 2017

How to create circular flashing colors progress bar using materialize CSS

Author:  |   |  No Comments | 

In this tutorial, we are learning that how to create circular flashing color progress bar using materialize css.

This progress bar is used to when your web page content will take long time to load. If progress bar will be put on the web page , then user can understand that this page will take long time for load.


There are many css class used to display circular flashing color progress bar. These all class included in materialize css file.

Let's see the example :

File Name : index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
 <head>
  <link rel="stylesheet" href="css/materialize.css" type="text/css"/>
  <script src="js/materialize.js" type="text/javascript" />
 </head>
    <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>
</html>

Output :

                            

, , , ,

0 comments:

Post a Comment

Like us on Facebook

Site Visitor

Powered by Blogger.