CSS3和js谷歌Material Design进度条插件

最新推荐文章于 2024-06-09 22:58:43 发布

原创最新推荐文章于 2024-06-09 22:58:43 发布 · 置顶 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#进度条 #loading动画 #js #css3 #谷歌样式

前端开发专栏收录该内容

44 篇文章

订阅专栏

mprogress是一款基于纯JS和CSS3实现的谷歌Material Design风格的进度条插件，无需依赖外部库，支持多种动画效果，包括确定型、缓冲型等，并且在主流浏览器上具有良好兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mprogress是一款使用纯JS和 CSS3制作的谷歌Material Design样式的进度条插件。该插件没有依赖任何外部库。它可以制作4种类型的进度条动画，使用扁平化设计，非常时尚。

该进度条插件有4种类型的动画方式，分别是：确定型、缓冲型、不确定型和查询确定型。

mprogress是移动设备优先的js插件，◦所有类型的进度条都可以工作在Chrome 和 Firefox浏览器上。Determinate类型的进度条可以工作在所有浏览器上。

在线演示：http://www.htmleaf.com/Demo/201502051330.html

下载地址：http://www.htmleaf.com/jQuery/Layout-Interface/201502051329.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

delmarks

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

EasyUI+JavaScript 添加和修改弹出框按钮

许小乖……是总攻

01-06

2万+

写这篇文章只是想吐槽一下在做三个弹出框按钮的心酸史，为什么只写两个呢？因为之前看到过别人写了一个删除的，所以我只写剩下的两个吧！现在做的系统总是涉及到增删改的总会上面三个好看的按钮，下面一个好看的DataGrid。添加和修改弹出框：首先要加载我们做好的添加和编辑弹出框。 @* 加载添加流程对话框 *@ @{Html.RenderParti

CSS3 实现网页顶部进度条

小北哥哥和北妈

08-15

1万+

有朋友们问网页顶部进度条 如何应用，现在github 大部分国外网站都在用，这个效果可以使用现成的一些插件比如这个，这个，还有这个。比如youtobe：前些时候有注意到YouTube网站放出的新特性，那就是在视频页面间切换时，页面顶部会有一道华丽丽的红色激光脉冲掠过。以下截图内容来自刘家勇博客。那不是其他什么为了炫技的东西，它是一个进度条，平时我们见了千百遍经常以转圈形式出现的进度条。当

参与评论您还未登录，请先登录后发表或查看评论

css如何实现进度条？？

jinlovo

04-23

2094

css 如何实现进度条 在生活中，我们不经意间就会看到很多的手机app上都会有带进度条，精简的软件会给我们视觉上的享受，那进度条是如何实现的呢？首先，创建一个大小自定义的div模块为外层，其下再创建布局两个div左右布局，在这两个div下分别存在子div，html样式： <div class="box"> <div class="circle lef...

html5 material design,FE.CSS-纯CSS3实现Material Design

weixin_29254673的博客

06-28

351

不断更新中预览这是一个正在完善的css文件，是对原生组件基于标签属性做了美化，对datepicker,select等无法用css实现的暂不考虑在本文内。按钮 Button初始按钮buttonredorangebluegreenlink描边按钮buttonredorangebluegreen禁用按钮disabled上浮按钮++按钮组buttonbuttonbutton表单Form文本输入开关单选ra...

最易上手的进度条插件Nprogress

ttxxi_的博客

11-14

456

一般我们在发送一个请求时或长或短需要一定时间，若什么都不做只是让他加载的话，用户不清楚是否请求完，用户体验性很差，因此我们可以使用一个顶部的加载状态栏来增强用户体验。同类型插件很多，但是这里推荐一个速度较快且极易上手的Nprogress 这是官网http://ricostacruz.com/nprogress/ 这个简单到就只有四个函数 NProgress.start(...

webview进度条设置之WebChromeClient常用API与功能使用详解

guozhaohui628

02-10

1156

转载自原文地址 0. 写在前面在使用这个WebChromeClient设置进入条有一点要注意，因为这进度加载不止一种样式，我们设置progress时，这个控件默认的style是那种转圈的，不仔细看可能看不清，以为没设置上，所以我们一般可以改变这个控件的样式，一般都是这种最经典的，就是经度条，代码就是在progress中加一条style属性。就这点要注意。 style="?androi

Chrome/Edge浏览器视频画中画可拉动进度条插件

最新发布

meser88的博客

06-09

1万+

平时看一些视频的时候，一般需要编辑一些其他的东西，于是开启画中画，但是画中画没有进度条，需要倒退前进得回到原视频，很麻烦。这里推荐插件Separate Window，可实现画中画进度条拉动。

纯js和CSS3谷歌Material Design样式进度条插件

12-11

【纯js和CSS3谷歌Material Design样式进度条插件】是一种基于JavaScript和CSS3技术实现的，无需依赖任何外部库的进度条组件。这个插件的设计灵感来源于谷歌的Material Design设计语言，它以其简洁的扁平化风格和流畅...

谷歌Material Design风格纯JS进度条插件

12-11

MProgress.js是一款谷歌Material Design风格纯JS进度条插件。该进度条通过纯JS和CSS3来制作，没有外部依赖库。你可以通过MProgress.js制作出4种不同类型的Material Design风格进度条效果。

谷歌Material Design风格纯前端进度条插件

资源摘要信息:"纯js和CSS3谷歌Material Design样式进度条插件" 知识点： 1. 谷歌Material Design风格：Material Design是谷歌公司发布的一款设计语言，旨在统一跨平台的用户界面设计。其特点包括丰富的色彩、扁平...

Material Design风格的MProgress.js纯JS进度条插件

标题中提到的“谷歌Material Design风格纯JS进度条插件”说明了该插件遵循谷歌提出的设计语言Material Design。Material Design是一种由谷歌推动的设计语言，它结合了大胆的色彩、网格布局、动效以及深度、空间、...

MProgress.js - 轻量级Material Design风格网页加载进度条插件

3. **Material Design风格**：这个插件提供了四种不同类型的进度条效果，这些效果遵循谷歌的Material Design设计理念。Material Design是一种广泛应用于Android、Web和桌面应用的设计语言，它强调了现实世界中纸张和...

Material Design Lite组件之进度指示器

骑着代码去流浪

05-30

468

1.进度条1.1.介绍Material Design Lite（MDL）进度组件是网页或应用程序中背景活动的可视指示器。进度指示器包含一个（通常）水平条，其中包含一些传达运动感的动画。虽然一些进度设备指示完成的大致或特定百分比，但MDL进度组件仅传达活动正在进行且尚未完成的事实。进度指示器是用户界面中已建立但非标准化的功能，可为用户提供应用程序状态的直观线索。因此，它们的设计和使用是整体用户...

NProgress，前端必备进度条插件，你值得拥有

热门推荐

每天进步一点点

04-25

4万+

官方网站：http://ricostacruz.com/nprogress/

[Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)

QiuJuer

10-07

1万+

前段时间 Android L 发布了，相信看过发布会了解过的朋友都为其中的 “Material Design” 感到由衷的惊艳吧！至少我是的。在惊艳之余感到由衷的遗憾，因为其必须在 ”Android L“ 上才能使用，MD，郁闷啊。之后便自己想弄一个点击动画试试，此念头一发不可收拾；干脆一不做二不休，就重写了一个 ”MaterialButton“ 控件出来。在这里不讨论什么是：“Material Design” 。在这里将给大家分享一下我自己弄的 “Material Design” 风格的 ”Ma

仿 Google Reader 随滚动条滚动加载页面效果

weixin_30537451的博客

10-23

159

Google阅读器上有一个AJAXscollLoad效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。对于我来说再好不过了，因为我很不喜欢翻页，尤其是输入页码再定位到页。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能...

jQuery中使用EasyUI类库

小小毛毛的博客

09-26

523

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，算是一个重量级的一个框架。jQuery EasyUI 框架提供了创建网页所需的一切，帮助轻松建立站点。easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。提供建立现代化的具有交互性的 javascript 应用的必要的功能。

EasyUi 进度条组件 ProgressBar 根据实时进度更改进度条颜色

meguoe的博客

08-02

1万+

EasyUi 进度条组件ProgressBar 根据实时进度更改进度条颜色。>=30%为绿，>=70为黄，>70%为红，可以应用率监控系统CPU、内存使用绿，通过进度及颜色表示当前系统资源使用率。 <div style="margin:20px 0;"> <a href="#" class="easyui-linkbutton" oncl...