一款基于AngularJS带数据提交等待动效的用户注册表单

Angular Form with validatoin and waiting Animation

angular, form

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2865
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*********************
 *	Variables
 ********************/
/*********************
 *	Functions
 ********************/
/*********************
 *	Custom Reset
 ********************/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*********************
 *	Project Styles
 ********************/

.user__body {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1em;
    background-color: #f3f3f4;
}
.user__container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.user__block {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}
.user__form-group {
    clear: both;
    margin: 1em 0 1em 0;
}
.user__form-input {
    float: right;
    width: 200px;
    text-align: left;
    padding: 5px 0 0 6px;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #c7c9cc;
    border-left: none;
    font-size: 1em;
    background-color: #f3f3f4;
}
.user__form-input:focus,
.user__form-input:active {
    border-bottom-color: #6386a9;
    outline: none;
}
.user__form-input::-webkit-input-placeholder {
    color: #c7c9cc;
}
.user__form-input:-moz-placeholder {
    color: #c7c9cc;
    opacity: 1;
}
.user__form-input::-moz-placeholder {
    color: #c7c9cc;
    opacity: 1;
}
.user__form-input:-ms-input-placeholder {
    color: #c7c9cc;
}
.user__form-input:focus::-webkit-input-placeholder {
    color: transparent;
}
.user__form-input:focus:-moz-placeholder {
    color: transparent;
}
.user__form-input:focus::-moz-placeholder {
    color: transparent;
}
.user__form-input:focus:-ms-input-placeholder {
    color: transparent;
}
.user__form-group--error .user__form-label {
    color: #e35c5f;
}
.user__form-group--error .user__form-input {
    color: #e35c5f;
    background-color: #ffe2e2;
    border-bottom-color: #e35c5f;
}
.user__form-group--error .user__form-input:focus,
.user__form-group--error .user__form-input:active {
    color: #e35c5f;
    border-bottom-color: #e35c5f;
    outline: none;
}
.user__form-group--error .user__form-input::-webkit-input-placeholder {
    color: transparent;
}
.user__form-group--error .user__form-input:-moz-placeholder {
    color: transparent;
    opacity: 1;
}
.user__form-group--error .user__form-input::-moz-placeholder {
    color: transparent;
    opacity: 1;
}
.user__form-group--error .user__form-input:-ms-input-placeholder {
    color: transparent;
}
.user__form-group--error .user__form-input:focus::-webkit-input-placeholder {
    color: transparent;
}
.user__form-group--error .user__form-input:focus:-moz-placeholder {
    color: transparent;
}
.user__form-group--error .user__form-input:focus::-moz-placeholder {
    color: transparent;
}
.user__form-group--error .user__form-input:focus:-ms-input-placeholder {
    color: transparent;
}
.user__form-group--error .user__form-message {
    clear: both;
    text-align: center;
    margin: 1em 0 1em 0;
    padding: 5px 0 5px 0;
    border: 1px solid #e66d70;
    color: #e66d70;
    background-color: #ffe2e2;
}
.user__button {
    width: 100%;
    height: 30px;
    border: 2px solid #6386a9;
    border-radius: 4px;
    background-color: #6386a9;
    color: #ffffff;
}
.user__button[disabled] {
    background-color: #abbcce;
    border-color: #abbcce;
    cursor: not-allowed;
}
.user__button[disabled]:hover,
.user__button[disabled]:active {
    color: #ffffff;
    background-color: #abbcce;
    border-color: #abbcce;
}
.user__button:hover,
.user__button:active {
    color: #ffffff;
    background-color: #597998;
    border-color: #597998;
}
.user__button:focus {
    outline: none;
}
.user__title {
    text-align: center;
    margin: 1em 0 1em 0;
    font-size: 1.333em;
}
.user__title--finish {
    font-size: 2em;
    color: #95d267;
}
/**
 *	Animations
 */

.user__loading-block {
    height: 6em;
}
.user__loading-block .animation__double-bounce-one,
.user__loading-block .animation__double-bounce-two {
    position: absolute;
    width: 5em;
    height: 5em;
    margin: 0 0 0 36.6%;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #ffffff;
    opacity: .65;
    -webkit-animation: bounceAnimation 2.0s infinite ease-in-out;
    animation: bounceAnimation 2.0s infinite ease-in-out;
}
.user__loading-block .animation__double-bounce-two {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
@-webkit-keyframes bounceAnimation {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes bounceAnimation {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

HTML

<div class="user__form-block" ng-show="!loadingBlock" ng-hide="loadingBlock">
                        <div class="user__form-group" ng-class="{ 'user__form-group--error' : userForm.name.$invalid && !userForm.name.$pristine }">
                            <label class="user__form-label">Name *</label>
                            
                            <input type="text" name="name" class="user__form-input" ng-model="user.name" placeholder="Enter your name" autocomplete="off" required>
                            
                            <div class="user__form-message" ng-show="userForm.name.$invalid && !userForm.name.$pristine">
                                You name is required.
                            </div>
                            
                        </div>

<div class="user__form-group" ng-class="{ 'user__form-group--error' : userForm.username.$invalid && !userForm.username.$pristine }">
                            <label class="user__form-label">Username *</label>
                            
                            <input type="text" name="username" class="user__form-input" ng-model="user.username" placeholder="Enter your username" autocomplete="off" ng-minlength="3" ng-maxlength="9">
                            
                            <div class="user__form-message" ng-show="userForm.username.$error.minlength">
                                Username is too short.
                            </div>
                            
                            <div class="user__form-message" ng-show="userForm.username.$error.maxlength">
                                Username is too long.
                            </div>
                            
                        </div>

<div class="user__form-group" ng-class="{ 'user__form-group--error' : userForm.email.$invalid && !userForm.email.$pristine }">
                            <label class="user__form-label">Email *</label>
                            
                            <input type="email" name="email" class="user__form-input" ng-model="user.email" placeholder="Enter your email" autocomplete="off">
                            
                            <div class="user__form-message" ng-show="userForm.email.$invalid && !userForm.email.$pristine">
                                Enter a valid email.
                            </div>
                            
                        </div>
                        
                    </div>

<button type="submit" class="user__button user__form-button" ng-disabled="!(user.name && user.username && user.email) || loadingBlock">
                        Submit
                    </button>
                    
                </form>
                
            </div>

<div class="user__title user__title--finish">
                    Success!
                </div>

<button type="submit" class="user__button" ng-click="reloadPage()">
                    Return Home
                </button>
                
            </div>

</div>
        
    </div>
    
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js'></script>
</body>

Angular Form with validatoin and waiting Animation

angular, form

编辑器支持Emmet

快捷键

Angular Form with validatoin and waiting Animation

angular, form

基于AngularJS实现带搜索和过滤功能的表格

使用Angular.js做数据验证的登录表单模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：