Image Upload Progress Bar

This previous topic covers your question pretty well. There is a way to create a "pseudo" progress bar which I've detailed in that thread.

http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar
http://www.gravityhelp.com/forums/topic/add-a-file-upload-progress-bar#post-6584

@made-connection

I get a server error when I try looking at your form.. I've tried a few times and no luck

screenshot: http://grab.by/arDf

EDIT: The form page finally loaded. I'll check it out and see what I can tell you.

I looked and saw your new div wasn't being written to the page after the form wrapper. Upon closer inspection, your jQuery script was missing a double-quote and the script wasn't being executed properly. Also, I would just include that script in the same block with the clear fields script above to keep it cleaner. Something like this..

jQuery(document).ready(function() {

	// clear the fields
		jQuery.fn.cleardefault = function() {
		return this.focus(function() {
			if( this.value == this.defaultValue ) {
				this.value = "";
			}
		}).blur(function() {
			if( !this.value.length ) {
				this.value = this.defaultValue;
			}
		});
	};
	jQuery(".clearit input, .clearit textarea").cleardefault();

	// upload progress bar
	jQuery(".gform_wrapper").after("<div class='fakeprogress'><h2>アップロード中。。。少々お待ちください</h2></div>");
	jQuery(".fakeprogress").hide();
	jQuery(".gform_footer input.button").click(function () {
			jQuery(".fakeprogress").delay(3000).show('slow');
	});

});

Try that and see if you get a little closer.

Okay, I see the div being added to the markup now by the jQuery. Here's your problem. Your form markup uses a button element to submit the form, not a standard input element.

<button class='large green awesome' id='gform_submit_button_1'>登録します！</button>

Your jQuery is trying to add the onClick event to an input so that's why nothing happens. You need to target the button element instead.. I used the button ID in the example below

jQuery(document).ready(function() {

	// clear the fields
		jQuery.fn.cleardefault = function() {
		return this.focus(function() {
			if( this.value == this.defaultValue ) {
				this.value = "";
			}
		}).blur(function() {
			if( !this.value.length ) {
				this.value = this.defaultValue;
			}
		});
	};
	jQuery(".clearit input, .clearit textarea").cleardefault();

	// upload progress bar
	jQuery(".gform_wrapper").after("<div class='fakeprogress'><h2>アップロード中。。。少々お待ちください</h2></div>");
	jQuery(".fakeprogress").hide();
	jQuery(".gform_footer button#gform_submit_button_1").click(function () {
			jQuery(".fakeprogress").delay(3000).show('slow');
	});

});

Also, I noticed the class name on your button is "large green awesome" just remember that class names don't have spaces. The browser will interpret this as 3 separate classes "large", "green" & "awesome".

Lastly, I don't see the styles for the new "fakeprogress" bar in your stylesheet. Don't forget to include those so everything works properly.

You're mixing things again. In the example, the new div was given an ID of "fakeprogress". Since you changed that to a class name, you need to change that in your CSS for it to apply properly. The rule in your stylesheet is still looking for an ID so it's not being applied. Try changing your rules to this.

[css]
.fakeprogress {
	background-color:#ceecff;
	border:2px solid #ADDEFC;
	background-image:url(../../uploads/btn/ajax-loader.gif);
	background-repeat:no-repeat;
	background-position:center 65px;
	height:120px;
	width:400px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-60px;
	margin-left:-200px;
	z-index:100;
}
.fakeprogress h2 {
	text-align:center;
	margin:0;
	padding:25px 0 0 0;
	font-weight:bold;
	font-size:24px;
	font-family:sans-serif;
}