JavaScript Animation: Enhancing TextBox Borders

Question

JavaScript Animation: Enhancing TextBox Borders

I'm exploring an idea for a loading animation, but I'm feeling a bit lost on where to begin. Basically, I have a text box that gets populated automatically with JavaScript on the page, however, it takes some time to load. I want to create something similar to the infinite-time progress bar in IE11 to display inside the box. It would be like a thin bar covering half of the width of the box and moving slowly across it. Here's an example:

How can I achieve this in a cross-browser compatible way, including mobile browsers?

javascript html css web

Answer 1

Answer №1

Here is a solution that may guide you in the right direction (and I hope you're open to using jQuery for this):

Incorporate the following HTML code:

<div id="wrapper">
    <div id="loading_progress"></div>
    <input type="text" value="" id="user_input">
</div>

Styling in CSS:

#user_input { 
    width:296px; 
    padding:2px;
    position:absolute; 
    top:0; 
    left: 0;
    border:1px solid #ddd; 
    margin:0; 
    z-index:1;
}

#wrapper { 
    position:relative;
    background:#ddd;
}

#loading_progress { 
    width:0; 
    padding:0;
    margin:0;
    background:#00f; 
    height:4px;
    position:absolute;
    top:2px;
    left:0;
    z-index:2;
}

Implementation with jQuery:

function resetProgressBar(){
    $("#loading_progress").css({'width':'0'});
}

function fillProgressBar(){
    $("#loading_progress").animate({'width':'300px'}, 2000);
}


setInterval( function(){resetProgressBar(); fillProgressBar(); }, 2200);

View DEMO

Answer 2

Here is a solution that may guide you in the right direction (and I hope you're open to using jQuery for this):

Incorporate the following HTML code:

<div id="wrapper">
    <div id="loading_progress"></div>
    <input type="text" value="" id="user_input">
</div>

Styling in CSS:

#user_input { 
    width:296px; 
    padding:2px;
    position:absolute; 
    top:0; 
    left: 0;
    border:1px solid #ddd; 
    margin:0; 
    z-index:1;
}

#wrapper { 
    position:relative;
    background:#ddd;
}

#loading_progress { 
    width:0; 
    padding:0;
    margin:0;
    background:#00f; 
    height:4px;
    position:absolute;
    top:2px;
    left:0;
    z-index:2;
}

Implementation with jQuery:

function resetProgressBar(){
    $("#loading_progress").css({'width':'0'});
}

function fillProgressBar(){
    $("#loading_progress").animate({'width':'300px'}, 2000);
}


setInterval( function(){resetProgressBar(); fillProgressBar(); }, 2200);

View DEMO

Answer 3

Answer №2

Web browsers display borders in a fixed manner;

Trying to animate the border of a TextBox (such as input:text or textarea) universally across different browsers and platforms is nearly impossible. In more modern browsers, like those that support css-level3 with border-image, it can be done.

However, it can be quite challenging.

Creating a progress bar above a TextBox, on the other hand, is much simpler, especially when loading content through AJAX. It involves positioning a container absolutely at the top left corner. Then, CSS animations are used on the container.

For examples, you can look into jquery-ui or search online for 'animated progress bar'

Answer 4

Web browsers display borders in a fixed manner;

Trying to animate the border of a TextBox (such as input:text or textarea) universally across different browsers and platforms is nearly impossible. In more modern browsers, like those that support css-level3 with border-image, it can be done.

However, it can be quite challenging.

Creating a progress bar above a TextBox, on the other hand, is much simpler, especially when loading content through AJAX. It involves positioning a container absolutely at the top left corner. Then, CSS animations are used on the container.

For examples, you can look into jquery-ui or search online for 'animated progress bar'

Answer 5

Answer №3

My go-to method has always been using 2 spans for this. The first span acts as the wrapper, set to a width of 100 pixels. Then, I adjust the second span's width based on the percentage of loading.

To create an animated effect, you can implement a setTimeout function that gradually increases the width of the inner span until it matches the width of the wrapper span.

By utilizing this approach, the loading time should be significantly fast.

Answer 6

My go-to method has always been using 2 spans for this. The first span acts as the wrapper, set to a width of 100 pixels. Then, I adjust the second span's width based on the percentage of loading.

To create an animated effect, you can implement a setTimeout function that gradually increases the width of the inner span until it matches the width of the wrapper span.

By utilizing this approach, the loading time should be significantly fast.

JavaScript Animation: Enhancing TextBox Borders

Answer №1

Answer №2

Answer №3

Similar questions

Using the 'useMediaQuery' function from Material UI in a class component

In the realm of JavaScript, "this" is a key player when referring to an object within a factory

How to shuffle and restrict ngFor elements in an HTML list

Is the existence of the file also verified by JavaScript's realpathSync() function?

Retrieve all HTML components with LXML

Disarrayed image in absolute position on my webpage

Capture any clicks that fall outside of the specified set

Choosing the subsequent div after the current one using Jquery

Creating a functional dropdown form in Ruby On Rails: A Step-by-Step Guide

Tips for utilizing getServerSideProps with a series of consecutive fetch() promises?

What is the reason for the new page rendering from the bottom of the screen in React?

Error Uploading File - Functioning in Postman but not on website interface

Is there a way to customize jqwidgets jQuery grid cell classes/styles based on row ID and column name?

Using JQuery to hide elements by setting CSS display as none instead of block

Simultaneous activation of CSS classes by multiple RouterLinkActive components

Display or conceal a div depending on whether the user is on a mobile or desktop browser

What is the best way to check the difference between the current date and time with another date and

Align the positioning of the dropdown menu and the input field

Code functioning properly on JS Fiddle, experiencing difficulties when running directly in browser

Display Vue component depending on specified attribute