带进度条的登陆界面 – FORT.JS

今天向大家分享一个交互不错的登陆界面,请看下面的GIF动画图像,这个登陆界面和普通登陆界面的区别就是它多了一个进度条设计。当用户输入用户名、密码等操作,进度条也跟滚动,直到你把所有文章框输入完成后,进度条就会加载到100%了。

Fort.js 插件截图

Fort.js的进度条设计简约精美,适用大部分Web端项目。目前实现了4个不同风格,你可以根据你自己的喜好来选择对应的进度条效果。

请点击下面链接查看DEMO:

  • Default | 默认风格,普通形式加载。
  • Gradient | 进度以渐变形式加载。
  • Sections | 分色块加载。
  • Flash | 渐变颜色过渡加载,具体看Demo…

Fort.js使用教程

STEP1: 外部文件加载
嵌入对应样式和js文件

<head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"></head>

STEP2: HTML
这是进度条的元素。

<body> <div class="top"> <div class="colors"></div> </div>

STEP3: JS
JS指加在表单内容下面,否则不能运行。

<body> ... <script> gradient(); </script> </body>

启用对应进度条效果请参照:
Default | solid()
Gradient | gradient()
Sections | sections()
Flash | flash()

下载地址:github

时间: 2024-10-30 02:07:07

带进度条的登陆界面 – FORT.JS的相关文章

【Android】自定义带进度条的WebView,修复不弹出软键盘的BUG

记录下最近开发中研究的带进度条的WebView 自定义类吧. 其实网上有不少这样的帖子,但是都没有一个完整的好用的例子,最关键的是,用网上的例子后有一个很明显的bug,就是遇到输入框的话没法弹出软键盘.研究了好久总算搞定了.特此记录下. 直接上源代码,关于代码的解释,个人感觉注释中已经添加的足够清楚了. ProgressWebView import android.content.Context; import android.content.res.Resources; import andr

Android带进度条的文件上传示例(使用AsyncTask异步任务)_Android

最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. demo运行截图: AsyncTask是抽象类,子类必须实现抽象方法doInBackground(Params... p),在此方法中实现任务的执行工作,比如联网下载或上传.AsyncTask定义了三种泛型类型Params,Progress和Result. 1.Params 启动任务执行的输入参数,比

asp.net单文件带进度条上传的解决方案_实用技巧

最近做项目中遇到很多问题,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传(可能是我没找到),下面我来跟大家分享一下我实现的这个程序. 首先看下界面效果,当然你可以完全修改界面为你自己所用. 先解释一下这个程序,该程序采用了jquery框架,实现了小文件上传,不超过80Mb,可以在web.config文件中进行相应的配置,但是有个最大值,具体需要查看msdn.开发环境采用visual studio 2013 .net framework 4.5,运行的时候

QFaces1.2 --Ajax方式,带进度条的文件上传组件FileUpload(for JSF)

这是QFaces的第4个组件,Ajax方式带进度条的文件上传组件,我希望每一个重要组件都提升一个版本, 呵呵!这个版本同时修正了ie6下的ajax兼容问题.在介绍完这个组件之后,打算介绍一下如何利用QFaces自 定义自己的Ajax组件,希望这个增强框架能对喜欢JSF的人有一些帮助.后面版本的升级可能就不会这么快, 或者考虑兼容一下facelets,并修正一些可能出现的错误,还有开源计划,然后继续维护并增加一些比较常 用与实用的组件,关注一下JSF2.0的发展等等. 好了,下面介绍一下QFace

Jquery Uploadify上传带进度条介绍

 本篇文章主要是对Jquery Uploadify上传带进度条的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>   <html xmlns="http://

基于Ajax技术实现文件上传带进度条_AJAX相关

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分

PHP+Ajax异步带进度条上传文件实例_php实例

最近项目中要做一个带进度条的上传文件的功能,学习了Ajax,使用起来比较方便,将几个方法实现就行. 前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min

jQuery.Uploadify插件实现带进度条的批量上传功能_jquery

本文实例讲述了jQuery.Uploadify插件实现带进度条的批量上传功能.分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xh

Jquery Uploadify上传带进度条的简单实例_jquery

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" ru