Requisitos: encontraremos el uso de varias barras de progreso durante el desarrollo, porque hay varias barras de progreso en los complementos actuales. Para facilitar nuestro desarrollo personalizado y la modificación conveniente de estilos, utilizamos estilos HTML y CSS aquí. función de barra .
A través de este artículo, entenderemos cómo usar HTML/CSS para crear varias barras de progreso básicas y barras de progreso sofisticadas y sus animaciones.
Cree una barra de progreso a través del medidor de etiquetas HTML. Cree una barra de progreso a través del progreso de la etiqueta HTML. Utilice CSS para crear un donut. barra de progreso con forma. Utilice CSS para crear una barra de progreso esférica.
La barra de progreso más común que encontramos es la barra de progreso horizontal. Este es el más común, ya que utiliza principalmente HTML5 para proporcionar dos etiquetas nativas e implementar la barra de progreso.
Ejemplos específicos de medidor son los siguientes:
<p> <span>Integridad:</span> <metro min="0" max="500" value="350">350 grados</meter> </p>
Entre ellos, mínimo, máximo y valor representan el valor máximo, el valor mínimo y el valor actual respectivamente.
Echemos un vistazo al uso de etiquetas:
<p> <label for="file">Integridad:</label> <progreso max="100" valor="70"> 70% </progreso> </p>
Entre ellos, el atributo máximo describe la cantidad total de trabajo que debe completarse para la tarea representada por el elemento de progreso, y el atributo de valor se utiliza para especificar la cantidad de trabajo que se ha completado mediante la barra de progreso.
Las diferencias entre las dos son las siguientes: Entonces la pregunta es, a juzgar por la demostración anterior, los efectos de las dos etiquetas son exactamente los mismos, entonces, ¿cuál es la diferencia entre ellas? ¿Por qué hay dos etiquetas aparentemente idénticas? La mayor diferencia entre estos dos elementos es la diferencia semántica. El medidor representa un valor de medición escalar o un valor fraccionario dentro de un rango conocido. El progreso representa el progreso de finalización de una tarea. Por ejemplo, se debe utilizar el nivel de finalización actual de un requisito y si desea mostrar el valor de velocidad actual en un automóvil. tablero, se debe utilizar el medidor.
Limitaciones del medidor y el progreso Por supuesto, en los requisitos comerciales reales o entornos de producción, casi nunca verá las etiquetas del medidor y del progreso. No podemos modificar de manera efectiva los estilos de los medidores y las etiquetas de progreso, como el color de fondo, el color de primer plano del progreso, etc. Y lo más fatal es que el rendimiento de los estilos predeterminados del navegador es inconsistente entre diferentes navegadores. ¡Esta es una deficiencia catastrófica para una empresa que busca estabilidad y un rendimiento constante de la interfaz de usuario! No podemos agregarle algunos efectos de animación y efectos interactivos, porque en algunos escenarios de aplicaciones reales, definitivamente no es una simple visualización de una barra de progreso y nada más. Use CSS para implementar la barra de progreso.
Por lo tanto, en esta etapa, se utilizan más métodos CSS para implementar la barra de progreso.
(1) Una de las formas más comunes de utilizar porcentajes para implementar una barra de progreso es utilizar un color de fondo combinado con un porcentaje para crear una barra de progreso con un degradado. El ejemplo DEMO más simple es el siguiente:
<div class="g-contenedor"> <div class="g-progreso"></div> </div> <div class="g-progreso"></div>
De manera similar, podemos usar el atributo de estilo HTML para completar el valor de fondo completo y pasar el porcentaje real. Por supuesto, es más recomendable usar atributos personalizados de CSS para pasar el valor. Para lograr el efecto de animación, podemos usarlo. CSS @property para transformar nuestro código:
<div class="g-progress" style="--progreso: 70%"></div>
@propiedad --progreso {
sintaxis: '<porcentaje>';
hereda: falso;
valor inicial: 0%;
}
.g-progreso {
margen: automático;
ancho: 240 px;
altura: 25 píxeles;
radio del borde: 25 px;
fondo: gradiente lineal (90 grados, #0f0, #0ff var (--progreso), transparente 0);
borde: 1px sólido #eee;
transición: .3s --progreso;
}El núcleo es utilizar un fondo degradado angular: conic-gradient(): el efecto de ejemplo es el siguiente:
El código es el siguiente:
<div class="círculo-de-progreso"
v-for="(elemento,índice) en progresoLista" :key="índice"
:estilo="{
fondo: `gradiente radial (#fff 55%, transparente 56%), gradiente cónico (#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%), gradiente radial (#fff 60%, #F1F3FC 0%);`
}
">
<span class="valor-progreso" >{{item.name}}</span>
<div clase="totalvalbox" >
{{ artículo.tasa }}%
</div>
</div>
<estilo lang="scss" ámbito>
.círculo de progreso {
posición: relativa;
ancho: 149rpx;
altura: 149rpx;
familia de fuentes: PingFang SC;
radio fronterizo: 50%;
pantalla: flexible;
alinear elementos: centro;
justificar-contenido: centro;
}
.valor-progreso {
posición: absoluta;
alineación de texto: centro;
altura de línea: 50rpx;
ancho: 100%;
peso de fuente: 400;
tamaño de fuente: 26rpx;
}
.totalvalbox {
ancho mínimo: 217rpx;
alineación de texto: centro;
posición: absoluta;
abajo: -50rpx;
peso de fuente: 400;
tamaño de fuente: 30rpx;
}
</estilo>El problema de optimización es el siguiente:
Los problemas que tienden a surgir aquí son los siguientes: Las limitaciones de realizar barras de progreso en arco con gradientes angulares Por supuesto, este método tiene dos desventajas. Por supuesto, cuando el porcentaje de progreso no son números como 0°, 90°, 180°, 270°, 360°, al usar gradientes angulares, habrá bordes irregulares obvios en las conexiones entre diferentes colores. Tomemos un ejemplo de gradiente cónico (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):
La solución a tales problemas es dejar algo de espacio de gradiente en el punto de conexión. Simplemente transformemos el código de gradiente angular anterior:
{
- fondo: gradiente cónico (#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ fondo: gradiente cónico (#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}Mire detenidamente el código anterior. El cambio del 27% al 27% se cambia del 27% al 27,2%. El 0,2% adicional es para eliminar el efecto real después del cambio.
En algunos casos, nos encontraremos con una barra de progreso con esquinas redondeadas al final de la barra de progreso. Por supuesto, esta situación también se puede solucionar si el color de la barra de progreso es un color sólido. Podemos lograr este efecto superponiendo dos. pequeños círculos al principio y al final. Si la barra de progreso es de un color degradado, esta barra de progreso debe implementarse con la ayuda de SVG/Canvas.
Los ejemplos son los siguientes:
HTML
<div class="g-progreso"></div> <div class="g-contenedor"> <div class="g-progreso"></div> <div class="g-círculo"></div> </div>
CSS
cuerpo, html {
ancho: 100%;
altura: 100%;
pantalla: flexible;
}
.g-contenedor {
posición: relativa;
margen: automático;
ancho: 200px;
altura: 200 píxeles;
}
.g-progreso {
posición: relativa;
margen: automático;
ancho: 200px;
altura: 200 píxeles;
radio fronterizo: 50%;
fondo: gradiente cónico (#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
máscara: degradado radial (transparente, transparente 80px, #000 80.5px, #000 0);
}
.g-círculo {
posición: absoluta;
arriba: 0;
izquierda: 0;
&::antes,
&::después {
contenido: "";
posición: absoluta;
arriba: 90px;
izquierda: 90px;
ancho: 20px;
altura: 20 píxeles;
radio fronterizo: 50%;
antecedentes: #FFCDB2;
índice z: 1;
}
&::antes {
transformar: traducir (0, -90px);
}
&::después {
transformar: rotar (90 grados) traducir (0, -90 px);
}
}Según esta expansión, también puede implementar una barra de progreso multicolor en forma de arco: (Puede que no parezca una barra de progreso, sino más bien un gráfico circular )
.g-progreso {
ancho: 160px;
altura: 160 píxeles;
radio fronterizo: 50%;
máscara: gradiente radial (transparente, transparente 50%, #000 51%, #000 0);
fondo:
gradiente cónico (
#FFCDB2 0, #FFCDB2 25%,
#B5838D 25%, #B5838D 50%,
#673ab7 50%, #673ab7 90%,
#ff5722 90,2%, #ff5722 100%
);
}Las barras de progreso esféricas también son relativamente comunes, similares a las siguientes:
El código central es el siguiente: simplemente controle la altura de la ola cuando el contenedor esférico indique un progreso del 0% al 100%. Podemos obtener el efecto de animación desde 0% - 100%.
<div clase="contenedor">
<div class="cambio de onda"></div>
<div class="ola"></div>
</div>
.contenedor {
ancho: 200px;
altura: 200 píxeles;
borde: 5px rgb sólido (118, 218, 255);
radio fronterizo: 50%;
desbordamiento: oculto;
}
.cambio de onda {
posición: absoluta;
ancho: 200px;
altura: 200 píxeles;
izquierda: 0;
arriba: 0;
animación: cambio 12s infinito lineal;
&::antes,
&::después{
contenido: "";
posición: absoluta;
ancho: 400px;
altura: 400 px;
arriba: 0;
izquierda: 50%;
color de fondo: rgba(255, 255, 255, .6);
radio fronterizo: 45% 47% 43% 46%;
transformar: traducir (-50%, -70%) rotar (0);
animación: rotar 7s lineal infinito;
índice z: 1;
}
&::después {
radio fronterizo: 47% 42% 46% 44%;
color de fondo: rgba(255, 255, 255, .8);
transformar: traducir (-50%, -70%) rotar (0);
animación: rotar 9s lineal -4s infinito;
índice z: 2;
}
}
.ola {
posición: relativa;
ancho: 200px;
altura: 200 píxeles;
color de fondo: rgb(118, 218, 255);
radio fronterizo: 50%;
}
pag {
posición: absoluta;
arriba: 50%;
izquierda: 50%;
transformar: traducir (-50%, -50%);
tamaño de fuente: 36px;
color: #000;
índice z: 10;
}
@keyframes rotar {
a {
transformar: traducir (-50%, -70%) rotar (360 grados);
}
}
@keyframes cambian {
de {
arriba: 80px;
}
a {
arriba: -120px;
}
}Por supuesto, CSS cambia constantemente y los tipos de barras de progreso definitivamente no se limitan a las categorías anteriores. Por ejemplo, podemos usar filtros para imitar la animación de carga de los teléfonos móviles Huawei, que también es una forma de presentar una barra de progreso y también se puede implementar usando CSS puro:
El código central es el siguiente.
<div class="g-contenedor">
<div class="g-number">98,7%</div>
<div class="g-contraste">
<div class="g-círculo"></div>
<ul class="g-burbujas">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
HTML,
cuerpo {
ancho: 100%;
altura: 100%;
pantalla: flexible;
fondo: #000;
desbordamiento: oculto;
}
.g-número {
posición: absoluta;
ancho: 300px;
arriba: 27%;
alineación de texto: centro;
tamaño de fuente: 32px;
índice z: 10;
color: #fff;
}
.g-contenedor {
posición: relativa;
ancho: 300px;
altura: 400 px;
margen: automático;
}
.g-contraste {
filtro: contraste(10) tono-rotar(0);
ancho: 300px;
altura: 400 px;
color de fondo: #000;
desbordamiento: oculto;
animación: hueRotate 10s infinito lineal;
}
.g-círculo {
posición: relativa;
ancho: 300px;
altura: 300 píxeles;
tamaño de caja: cuadro de borde;
filtro: desenfoque (8px);
&::después {
contenido: "";
posición: absoluta;
arriba: 40%;
izquierda: 50%;
transformar: traducir (-50%, -50%) rotar (0);
ancho: 200px;
altura: 200 píxeles;
color de fondo: #00ff6f;
radio-frontera: 42% 38% 62% 49% / 45%;
animación: rotar 10s infinito lineal;
}
&::antes {
contenido: "";
posición: absoluta;
ancho: 176px;
altura: 176px;
arriba: 40%;
izquierda: 50%;
transformar: traducir (-50%, -50%);
radio fronterizo: 50%;
color de fondo: #000;
índice z: 10;
}
}
.g-burbujas {
posición: absoluta;
izquierda: 50%;
abajo: 0;
ancho: 100px;
altura: 40 píxeles;
transformar: traducir (-50%, 0);
radio de borde: 100px 100px 0 0;
color de fondo: #00ff6f;
filtro: desenfoque (5px);
}
li {
posición: absoluta;
radio fronterizo: 50%;
fondo: #00ff6f;
}
@por $i de 0 a 15 {
li:nésimo-niño(#{$i}) {
$ancho: 15 + aleatorio(15) + px;
izquierda: 15 + aleatorio(70) + px;
arriba: 50%;
transformar: traducir (-50%, -50%);
ancho: $ancho;
altura: $ancho;
animación: moveToTop #{random(6) + 3}s facilidad de entrada y salida -#{random(5000)/1000}s infinito;
}
}
@keyframes rotar {
50% {
radio fronterizo: 45% / 42% 38% 58% 49%;
}
100% {
transformar: traducir (-50%, -50%) rotar (720 grados);
}
}
@keyframes mover hacia arriba {
90% {
opacidad: 1;
}
100% {
opacidad: .1;
transformar: traducir (-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filtro: contraste (15) rotación de tono (360 grados);
}
}Finalmente, recomiendo varias barras de progreso buenas, interesantes y de alta calidad.
Se puede hacer clic en la implementación completa de los efectos anteriores: use CSS inteligentemente para lograr animaciones de carga geniales
Con esto concluye este artículo sobre cómo implementar varias funciones de la barra de progreso a través de HTML/CSS. Eso es todo para la introducción del artículo. Para obtener más contenido de la barra de progreso html css relacionado, busque los artículos anteriores de downcodes.com o continúe explorando los artículos relacionados a continuación. ¡Espero que admita downcodes.com en el futuro!