`

AmazeUI 进度条

 
阅读更多 
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>进度条</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 10px;">
<!--基本样式-->
<div class="am-progress">
  <div class="am-progress-bar" style="width: 30%"></div>
</div>
<div class="am-progress">
  <div class="am-progress-bar" style="width: 40%">40%</div>
</div>
<!--进度条颜色-->
<div class="am-progress">
  <div class="am-progress-bar" style="width: 15%"></div>
</div>
<div class="am-progress">
  <div class="am-progress-bar am-progress-bar-secondary" style="width: 30%"></div>
</div>
<div class="am-progress">
  <div class="am-progress-bar am-progress-bar-success" style="width: 45%"></div>
</div>
<div class="am-progress">
  <div class="am-progress-bar am-progress-bar-warning" style="width: 60%"></div>
</div>
<div class="am-progress">
  <div class="am-progress-bar am-progress-bar-danger" style="width: 75%"></div>
</div>
<!--进度条高度-->
<div class="am-progress am-progress-xs">
    <div class="am-progress-bar" style="width: 80%"></div>
</div>
<div class="am-progress am-progress-sm">
    <div class="am-progress-bar" style="width: 60%"></div>
</div>
<div class="am-progress">
    <div class="am-progress-bar" style="width: 40%"></div>
</div>
<!--进度条条纹-->
<div class="am-progress am-progress-striped">
  <div class="am-progress-bar am-progress-bar-danger" style="width: 80%"></div>
</div>
<div class="am-progress am-progress-striped">
  <div class="am-progress-bar am-progress-bar-warning" style="width: 60%"></div>
</div>
<div class="am-progress am-progress-striped">
  <div class="am-progress-bar am-progress-bar-success" style="width: 45%"></div>
</div>
<div class="am-progress am-progress-striped">
  <div class="am-progress-bar am-progress-bar-secondary" style="width: 30%"></div>
</div>
<div class="am-progress am-progress-striped">
  <div class="am-progress-bar" style="width: 15%"></div>
</div>
<!--进度条动画-->
<div class="am-progress am-progress-striped am-progress-sm am-active ">
  <div class="am-progress-bar am-progress-bar-secondary"  style="width: 57%"></div>
</div>
<!--进度条堆叠-->
<div class="am-progress">
  <div class="am-progress-bar"  style="width: 65%">Male</div>
  <div class="am-progress-bar am-progress-bar-success"  style="width: 15%">Female</div>
  <div class="am-progress-bar am-progress-bar-warning"  style="width: 20%">Other</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

效果图：

 

 

 

  • 大小: 7.7 KB
分享到：
| AmazeUI 缩略图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AmazeUI 加载进度条

    AmazeUI加载进度条是一款基于AmazeUI框架的前端组件，用于在页面加载或数据传输过程中展示进度，提升用户体验。AmazeUI是中国首个开源HTML5跨屏前端框架，旨在为移动优先的Web开发提供简洁、易用、强大的工具集。 ...

    基于amazeui头像上传

    AmazeUI的上传组件提供了一种简单易用的方式来处理文件上传，包括预览、多文件选择、进度条显示等功能。在创建头像上传功能时，我们可以利用这些特性来提升用户体验。 1. **基本结构**： 创建一个HTML表单，包含一...

    Amaze UI 前台模板

    Amaze UI 是一款专为中国开发者设计的开源前端框架，它集成了丰富的组件和模块，能够帮助开发者快速构建响应式和跨设备的网页应用。这款前台模板以其美观的界面和高效的功能，深受开发者们的喜爱。"Amaze UI 前台...

    【AmazeUI】黑白两种主题后台管理模板 - admin

    2. 仪表盘：作为后台的主要页面，仪表盘通常展示关键的数据统计和概览，如用户数量、订单量、销售额等，AmazeUI的仪表盘设计会注重数据可视化，使用图表和进度条等元素来直观地展示信息。 3. 表格：后台管理系统往往...

    AmazeUI 基本页面

    AmazeUI是一个开源的前端框架，专为移动优先（Mobile First）设计，旨在提供一套高效、易用、跨平台的前端开发解决方案。AmazeUI基于HTML5和CSS3技术，适用于构建高性能的Web应用，同时支持桌面端和移动端。在这个...

    AmazeUI 加载进度条的实现示例

    本文主要介绍了AmazeUI 加载进度条的实现示例，分享给大家，具体如下: &lt;!doctype html&gt; &lt;html class=no-js&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;meta ...

    网站模板15-Amaze UI 后台模板_响应式后台模板.zip

    4. **UI组件**：模板内含各种预设的UI组件，如按钮、表单元素（输入框、下拉菜单、复选框、单选按钮等）、表格、卡片、通知提示、进度条、滑块、时间线等，这些组件设计简洁，易于集成到项目中，减少开发者重复造...

    基于HTML5 Amazeui框架实现头像上传功能特效源码.zip

    AmazeUI是一个轻量级的前端框架，它专注于移动优先，提供了丰富的UI组件，包括表单、按钮、导航等，同时支持响应式布局，使得开发者能够快速构建跨平台、跨设备的网页应用。在这个头像上传功能中，AmazeUI的表单元素...

    AmazeUIUpload插

    在使用amazeuiUpload-master这个压缩包时，你需要解压后找到源码文件，通常包括JavaScript文件（如`amazeui.upload.js`）、CSS文件（如`amazeui.upload.css`）以及示例代码和文档。按照文档指示，将这些文件引入到你...

    多文件上传，并显示每一个的进度

    3. **AmazeUI的Upload组件**：类似地，AmazeUI也有上传组件，通过`data-am-uploader`属性来启用。它支持多文件上传，并且可以通过回调函数跟踪上传进度。 4. **JavaScript处理**：无论使用哪种框架，我们都需要...

    Amaze后台html静态模板.zip

    7. **预定义的组件**：Amaze模板包含了一系列预定义的UI组件，如按钮、表单、表格、卡片、通知、进度条、面包屑导航等，这些都是后台系统常见的元素，可以快速拖放使用。 8. **插件集成**：为了增强功能，模板可能...

Magicbox
Global site tag (gtag.js) - Google Analytics