Open In App

Semantic-UI Progress Variations

Last Updated : 21 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

A Semantic UI Progress allows a user to show the progression of a task. Semantic UI Progress offers us 2 Types, 3 Content, 5 States, and 5 variations.

In this article, we will learn about the Semantic UI Progress variations.

Semantic UI Progress Variations:

  • Inverted: It is used to set the progress bar with colors inverted.
  • Attached: It is used for creating a progress bar that can show the progress of an element in the top or bottom attachment.
  • Size: It is used to create different sizes of progress bars.
  • Color: It is used to create different color progress components.
  • Inverted Color: This is used to invert for improved contrast on dark backgrounds

Syntax:

<div class="ui Progress-Variation progress">
    <div class="bar"></div>
    ....
</div>

Example 1: Below examples illustrates the Semantic-UI Progress size and color variations.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
</head>
 
<body>
    <div class="ui container">
        <center>
        <div>
            <h1 class="ui green header">
            GeeksforGeeks
            </h1>
            <strong>Semantic-UI Progress Variations</strong>
        </div>
        </center>
        <!-- Tiny Sized Color Progress Bar -->
        <div class="ui progress tiny red"
            data-value="40"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress Bar - Red Tiny Size
            </div>
        </div>
 
        <!-- Small Sized color Progress Bar -->
        <div class="ui progress small orange"
            data-value="50"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Orange Small Size
            </div>
        </div>
 
        <!-- Default Sized Color Progress Bar -->
        <div class="ui progress yellow"
            data-value="60"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Yellow Default Size
            </div>
        </div>
 
        <!-- Large Sized Color Progress Bar -->
        <div class="ui progress large blue"
            data-value="70"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Blue Large Size
            </div>
        </div>
 
        <!-- Big Sized Color Progress Bar -->
        <div class="ui progress big pink"
            data-value="80"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Pink Big Size
            </div>
        </div>
    </div>
 
    <script>
        $(".ui.progress").progress();
    </script>
</body>
 
</html>
 






                        










Output:


Semantic-UI Progress Variations
Semantic-UI Progress Variations


Example 2: The following code demonstrates inverted and attached progress variation.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <!-- Scripts and CSS -->


    <link rel="stylesheet" href=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />


    <script src=


"https://code.jquery.com/jquery-3.1.1.min.js">


    </script>


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


    </script>


 


</head>


 


<body>


    <div class="ui container">


        <center>


            <div>


                <h1 class="ui green header">GeeksforGeeks</h1>


                <strong>Semantic-UI Progress Variations</strong>


            </div>


        </center>


        <strong>Inverted Progress:</strong>


        <div class="ui inverted segment">


          <div class="ui inverted progress" data-value="20"


            data-total="100">


            <div class="bar" >


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


            </div>


            <div class="label">Uploading Files</div>


          </div>


          <div class="ui inverted progress success" data-value="40"


            data-total="100">


            <div class="bar">


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


            </div>


            <div class="label">File Sending</div>


          </div>


       </div>


       <strong>Attached Progress:</strong>


       <div class="ui segment">


         <div class="ui top attached progress" data-value="20"


            data-total="100">


           <div class="bar"></div>


         </div>


          


<p>GeeksforGeeks</p>


 


         <div class="ui bottom attached green progress" data-value="30"


            data-total="100">


           <div class="bar"></div>


         </div>


       </div>


       <strong>Inverted Color Progress:</strong>


       <div class="ui inverted segment">


         <div class="ui blue inverted progress" data-value="10"


            data-total="100">


           <div class="bar">


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


             <div class="label"></div>


           </div>


         </div>


         <div class="ui green inverted progress" data-value="10"


            data-total="100">


           <div class="bar">


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


             <div class="label"></div>


           </div>


         </div>


       </div>


    </div>


    <script>


        $(".ui.progress").progress();


    </script>


</body>


</html>



















                        







                        










Output:


Semantic-UI Progress Variations
Semantic-UI Progress Variations


Reference: https://semantic-ui.com/modules/progress.html


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Progress States
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI | Rating
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Semantic-UI Progress Progress Content
            

        
    
        
            

                Semantic-UI Image Size Variations
            

        
    
        
            

                Semantic-UI Reveal Variations
            

        
    
        
            

                Semantic-UI Divider Variations Inverted Variant
            

        
    
        
            

                Semantic-UI Button Variations
            

        
    
        
            

                Semantic-UI Button Group Variations Labeled Icon Buttons
            

        
    
        
            

                Semantic-UI Divider Variations Clearing Variant
            

        
    
        
            

                Semantic-UI Image Centered Variations
            

        
    
        
            

                Semantic-UI Image Rounded Variations
            

        
    
        
            

                Semantic-UI Button Group Variations
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        skyridetim                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox