【Tailwind】各种样式的进度条

基本样式进度条:

<div class="mb-5 h-2 rounded-full bg-gray-200"><div class="h-2 rounded-full bg-orange-500" style="width: 50%"></div>
</div>

在这里插入图片描述

带文字的进度条:

<div class="relative mb-5 h-2 rounded-full bg-gray-200"><div class="h-2 rounded-full bg-red-500" style="width: 25%"></div><span class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-900">25%</span>
</div>

更多进度条见:Designing Stunning Progress Bars Made Easy with Tailwind CSS

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

npm install报错certificate has expired

报错&#xff1a; reason: certificate has expired 解决&#xff1a;更换npm镜像源 登录到服务器上&#xff0c;更换npm镜像源(或者在jenkins上配置) npm config set registry http://registry.cnpmjs.org npm config set registry http://registry.npm.taobao.org #如果上面…

人工智能时代:让AIGC成为你的外部智慧源(文末送书)

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 什么是AIGC?二. AIGC如何运作&#xff1f;2.1 步骤一&#xff1a;收集数据2.…

postgresql12表膨胀解决(不锁表)

查看所有数据库占用磁盘空间 SELECTpg_database.datname AS "数据库名称",pg_size_pretty(pg_database_size(pg_database.datname)) AS "磁盘占用空间" FROMpg_database;发现有个数据库占用空间过大 查询库中所有表占用空间 SELECTtable_name,pg_size_…

Lucene 源码分析——BKD-Tree

Lucene 源码分析——BKD-Tree - AIQ Bkd-Tree Bkd-Tree作为一种基于K-D-B-tree的索引结构&#xff0c;用来对多维度的点数据(multi-dimensional point data)集进行索引。Bkd-Tree跟K-D-B-tree的理论部分在本篇文章中不详细介绍&#xff0c;对应的两篇论文在附件中&#xff0c…

【LangChain学习之旅】—(9) 用SequencialChain链接不同的组件

【LangChain学习之旅】—&#xff08;9&#xff09;用SequencialChain链接不同的组件 什么是 ChainLLMChain&#xff1a;最简单的链链的调用方式直接调用通过 run 方法通过 predict 方法通过 apply 方法通过 generate 方法 Sequential Chain&#xff1a;顺序链首先&#xff0c;…

Oracle篇—分区表的管理(第二篇,总共五篇)

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

day2C++

思维导图 Rect类 #include <iostream>using namespace std;class my_Rect { private:int width;int height;public://初始化void init(){cout << "please ener w and h" << endl;cin >> width;cin >> height;cout << "suc…

Linux入门攻坚——14、实战软件安装-搭建Python3.8环境-2

上一篇解决了openssl和pip问题&#xff0c;这一篇来解决sqlite问题 创建app时出现错误&#xff0c;模块_sqlite3找不到&#xff0c;查询sqlite相关的包&#xff1a; 在python2.6的lib-dynload路径下&#xff0c;有_sqlite3.so&#xff0c;这个应该就是Python需要的sqlite模块&a…

磺化 Cy5 溶菌酶,Sulfo-Cyanine5-Lysozyme,用于标记生物分子和细胞结构

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;磺化 Cy5 溶菌酶&#xff0c;Sulfo-Cyanine5-Lysozyme&#xff0c;Sulfo Cy5 Lysozyme 一、基本信息 产品简介&#xff1a;Sulfo Cyanine5 Lysozyme, also known as sulfonated Cy5 lysozyme, is a fluorescent mar…

ASP.NET Core WebAPI从HTTPS调整为HTTP启动

使用VS2022创建WebAPI项目时&#xff0c;默认勾选“配置HTTPS(H)”&#xff0c;这样启动WebAPI时以https方式启动。   如果要从HTTPS调整为HTTP启动&#xff0c;需要修改项目中以下几处&#xff0c;首先是Program.cs中删除app.UseHttpsRedirection()语句&#xff0c;删除后…

【Unity】粒子贴图异常白边问题

从PS制作的黑底&#xff0c;白光的贴图。放入Unity粒子中&#xff0c;拉远看会有很严重的白边&#xff0c;像马赛克一样。 材质使用&#xff1a;Mobile/Particles/Additive 经测试只使用一张黑色的图片&#xff0c;也会有白边。 解决方案&#xff1a; 关闭黑色底&#xf…

php基础学习之整型进制

不同进制的整型数据定义 在 PHP中提供了四种整型的定义方式&#xff1a;十进制定义&#xff0c;二进制定义&#xff0c;八进制定义和十六进制。 定义格式如下&#xff1a; 十进制是最基础的&#xff1a;$a 110;二进制需要在值前面加上0b&#xff1a;$a 0B1101110;&#xf…

arcgis 面要素shp数据处理

面要素是工作中用到最多的&#xff0c;那么面要素是如何形成的呢&#xff0c;主要还是由闭合的线要素转换而成。在面要素数据中常用的有以下几点&#xff1a; 一、 线转面&#xff08;要素转面&#xff09; 通过上一篇得到了点转线的要素&#xff0c;那么根据上节的线要素&am…

Sqlite真空命令VACUUM

之前在项目中使用了sqlite数据库&#xff0c;当日志变大时&#xff0c;执行CRUD操作就会变慢 后来尝试删除7天前的记录进行优化 delete from XX_CollectData where CreateTime<2024-01-24 发现sqlite文件的大小就没有变化&#xff0c;delete命令只是逻辑删除&#xff0c;…

BPM、低代码和人工智能:实现灵活、创新与转型的关键结合

随着零售业格局的不断演变&#xff0c;零售商正被迫在一个日益活跃、竞争日益激烈的客户驱动型市场中展开竞争。随着互联网上产品信息和评论的出现&#xff0c;消费者的态度发生了巨大的变化——购物者不再依赖销售人员来获取信息。他们现在知道的和许多零售销售人员一样多&…

Element-Plus如何实现表单校验和表单重置

一&#xff1a;页面布局介绍&#xff1a; 这是我刚刚用基于vue3element-plus写好的一个部门管理的页面 基本的增删改查已经写好&#xff0c;下面我只提供页面的template和style的代码&#xff1a; template <template><el-card class"box-card"><…

openGauss学习笔记-207 openGauss 数据库运维-常见故障定位案例-btree 索引故障情况下应对策略

文章目录 openGauss学习笔记-207 openGauss 数据库运维-常见故障定位案例-btree 索引故障情况下应对策略207.1 btree 索引故障情况下应对策略207.1.1 问题现象207.1.2 原因分析207.1.3 处理办法 openGauss学习笔记-207 openGauss 数据库运维-常见故障定位案例-btree 索引故障情…

洛谷P5735 【深基7.例1】距离函数(C语言)

首先&#xff0c;三角形周长为 其次(x1,x2)和 &#xff08;y1,y2&#xff09;的距离 然后就可以为所欲为 #include <stdio.h> #include <math.h>double distance(double a1, double b1, double a2, double b2) {return sqrt((a1 - a2) * (a1 - a2) (b1 - b2) * …

【跳槽面试】Redis的过期键删除策略?

前言 key的生存时间到了&#xff0c;Redis会立即删除吗&#xff1f;不会立即删除。 过期策略 • 定时删除&#xff1a;在设置key的过期时间的同时&#xff0c;为该key创建一个定时器&#xff0c;让定时器在key的过期时间来临时&#xff0c;对key进行删除 • 定期删除&#xff…

简单模拟实现一个线程池

废话不多说之间上代码 import java.util.ArrayList; import java.util.List; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue;public class MyThreadPoolExecutor {private List<Thread> listnew ArrayList<>();pri…