Bulma - Notification and Progress bars | Adglob Infosystem Pvt Ltd

In this guide, we will discuss Notification and Progress bars in Bulma.

Description

Bulma specifies predefined alert messages to display the notification in blocks. Bulma provides .notification class, to display the notification.

The below example demonstrates how to display the notification to the users by using color modifiers (is-primary, is-link, is-info, is-success, is-warning, is-danger) −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Basic Notification
            </span>
            <br>
            
            <div class = "notification">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            <br>
            
            <span class = "is-size-5">
               Notification Colors
            </span>
            <br>
            
            <div class = "notification is-primary">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-link">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-info">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-success">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-warning">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-danger">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
         </div>
      </section>
      
   </body>
</html>

Progress Bars

Progress bar is used to specify progress of the work (for instance, downloading process).

The below example demonstrates use of progress bars −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Basic Progress Bar
            </span>
            <br>
            
            <progress class = "progress" value="15" max = "100">15%</progress>
            
            <span class = "is-size-5">
               Colors of Progress Bars
            </span>
            <br>
            
            <progress class = "progress is-primary" value = "15" max = "100">20%</progress>
            <progress class = "progress is-link" value = "30" max = "100">35%</progress>
            <progress class = "progress is-info" value = "45" max = "100">50%</progress>
            
            <progress class = "progress is-success" value = "15" max = "100">65%</progress>
            <progress class = "progress is-warning" value = "30" max = "100">70%</progress>
            <progress class = "progress is-danger" value = "45" max = "100">95%</progress>
            
            <span class = "is-size-5">
               Sizes of Progress Bars
            </span>
            <br>
            
            <progress class = "progress is-small" value = "25" max = "100">15%</progress>
            <progress class = "progress" value = "40" max = "100">30%</progress>
            <progress class = "progress is-medium" value = "50" max = "100">45%</progress>
            <progress class = "progress is-large" value = "70" max = "100">60%</progress>
         </div>
      </section>
      
   </body>
</html>

Next Topic : Click Here