<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Barra de progreso</title>
</head>
<body>
<div class="container">
<div class="css"></div>
<div class="html"></div>
<div class="php"></div>
</div>
</body>
</html>
$bgcolor: darkblue;
@function progress_bar_rotate($deg){
@if $deg >= 0 and $deg <= 100 {
$deg: $deg / 100 * 180;
}@else{
$deg: 0;
}
@return #{$deg}deg;
}
@mixin progress_bar($bgcolor,$progressColor,$texto,$deg){
display: block;
width: 8rem;
height: 8rem;
position: relative;
background-image: linear-gradient(
rgba($progressColor,.5) 50%,
$progressColor 50%
);
border-radius: 50%;
transform: rotate(progress_bar_rotate($deg));
&::before,&::after{
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
box-sizing: border-box;
text-align: center;
text-transform: uppercase;
color: $progressColor;
}
&::before{
content: "#{$texto}";
padding: .5rem;
background-color: $bgcolor;
background-clip: content-box;
line-height: 3rem;
font-size: 1.2rem;
transform: rotate(-#{progress_bar_rotate($deg)});
}
&::after{
content: "#{$deg}%";
background-image: linear-gradient(
transparent 50%,
$bgcolor 50%
);
transform: scale(1.1) rotate(-#{progress_bar_rotate($deg)});
line-height: 7rem;
font-size: .8rem;
}
}
body{
display: flex;
align-items: center;
justify-content: center;
.container{
display: flex;
justify-content: space-around;
background-color: $bgcolor;
height: 9rem;
min-width: 500px;
padding-top: 4rem;
}
min-height: 100vh;
}
.html{
@include progress_bar($bgcolor,yellow,html,85);
}
.php{
@include progress_bar($bgcolor,white,php,80);
}
.css{
@include progress_bar($bgcolor, red,css,50);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.