使用 HTML 和 CSS 创建一个圆形进度条

进度条用于显示计算机上进程的进度。进度条显示完成了多少过程以及还剩下多少。所以，今天我们将使用 HTML 和 CSS 设计一个圆形进度条。通过使用 HTML，我们将为该进度条设计不同的组件，然后通过使用 CSS 的属性，我们可以设置进度条的样式。

提供了一个示例图片以更清晰地理解今天的任务。

分步实施：

第 1 步：首先，我们将使用 HTML 设计一个基本的进度条结构。首先，我们将创建一个包含两个进度条的容器 div。之后，我们将在创建圆形 div 元素的容器 div 内创建另一个 div。在这里，我们添加了一些注释，以帮助读者轻松理解。

HTML

  

    
    
    
  
    
    

  

  
    
    
GeeksForGeeks Circular Progress Bars
  
    
    

  
        
        

            
85%
            
Java
        
  
        

            
50%
            
HTML
        
    

  

第 2 步：接下来，我们将使用一些 CSS 属性来设计进度条。容器类设置 div 元素的位置。其他 CSS 类用于创建圆形进度条和添加的 CSS 样式。

CSS

/* Apply css properties to h1 element */
h1{
    text-align: center;
}
  
/* Create a container using css properties */
.container {
    top: 30%;
    left:50%;
    position: absolute;
    text-align: center;
    transform: translate(-50%, -50%);
}
  
/* Apply css properties to ui-widgets class */
.ui-widgets {
    position: relative;
    display: inline-block;
    width: 10rem;
    height: 10rem;
    border-radius: 9rem;
    margin:1.5rem;
    border: 1.2rem solid palegreen;
    box-shadow: inset 0 0 7px grey;
    border-left-color: palegreen;
    border-top-color:chartreuse ;
    border-right-color: darkgreen;
    border-bottom-color: white ;
    text-align: center;
    box-sizing: border-box;
}
  
/* Apply css properties to the second
    child of ui-widgets class */
.ui-widgets:nth-child(2) {
    border-top-color:chartreuse ;
    border-right-color: white;
    border-left-color: palegreen;
    border-bottom-color: white;
}
  
/* Apply css properties to ui-widgets
   class and ui-values class */
.ui-widgets .ui-values {
    top: 40px;
    position: absolute;
    left: 10px;
    right: 0;
    font-weight: 700;
    font-size: 2.0rem;
}
  
/*  Apply css properties to ui-widgets 
class and ui-labels class */
.ui-widgets .ui-labels {
    left: 0;
    bottom: -16px;
    text-shadow: 0 0 4px grey;
    color:black;
    position: absolute;
    width: 100%;
    font-size: 16px;
}

完整代码：在本节中，我们将结合以上两节使用 HTML 和 CSS 创建一个圆形进度条。

HTML

  

    
    
    
  
    
    
  
    

  

  
    
    
GeeksforGeeks Circular Progress Bar
  
    
    

  
        
        

            
85%
            
Java
        
  
        

            
50%
            
HTML
        
    

  

输出：