The HTML and CSS progress bar continues beyond its endpoint

I am struggling to figure out how to make my progress bar stop at 100% instead of clearing at 70%. Can anyone offer any suggestions or tips on adding an animation setting to achieve this?

.wrap {
  background-color: #f2f2f2;
  height: 10px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  top: 20px;
  margin-bottom: 20px;
}

.bar {
  background: #ffcc00;
  height: 10px;
  width: 0%;
}

.animating {
  -webkit-animation: progress 3s ;
}

@-webkit-keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
<div class="wrap">
  <div class="bar animating"></div>
</div>

htmlcssanimation

Answer №1

animation-fill-mode: forwards; or 

-moz-animation: progress 3s forwards;

Answer №2

Attempt utilizing 100% within:

@-webkit-keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 70%; /* modify to 100% */
  }
}

Answer №3

A stylish variation

  .wrap {
  background-color: #f2f2f2;
  height: 10px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  top: 20px;
  margin-bottom: 20px;
}

.wrap div {
  background-color: #ffcc00;
  height: 10px;
  width: 0%;
  border-radius: 5px;
  animation: loadbar 3s;
  -webkit-animation: loadbar 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes loadbar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
  @keyframes loadbar {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }
<div class="wrap">
  <div class="bar animating"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

Content not being hidden by Twitter Bootstrap tabs

I am encountering an issue with my code. When I click on an inactive tab, the content of the first tab does not hide and both tabs' content is displayed simultaneously. Is there a solution to this problem? Thank you for your help! <ul style="l ...

htmltwitter-bootstraptwitter-bootstrap-3

Styling using CSS is effective only when applied locally, as it does not function properly on GitHub Pages

Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...

htmlcssgithub

Making a form select element responsive within a bootstrap 4 card component

Check out the code snippet I have here: This is how I envisioned it to look, and it works perfectly at large resolutions. However, when I scale it down to tablet size, the resizing of the select element doesn't seem to work properly. Here's a s ...

htmltwitter-bootstrapbootstrap-4

Creating a responsive contact form using Javascript

I have a question regarding making a contact form responsive with javascript. I am still new to JavaScript, but I consider myself at a mid-level proficiency with HTML and CSS. The issue I am facing is that I recently registered with a third-party contact ...

javascripthtml

Is it possible for a website to be compromised by incorporating CSS within HTML code?

I'm currently working on developing a shopping cart component in React, but my supervisor has advised against using CSS directly in the HTML markup due to security concerns. While I understand the importance of good coding practices, I fail to see how ...

htmlcssreactjsmaterial-uiwebsecurity

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

htmlcss

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Is there a way to replicate the behavior of Bootstrap 3 dropdowns with scrollbars on hover and popovers in Bootstrap 4? It seems that setting overflow:hidden; for scrolling functionality in dropdown menus also hides the popover. I have tried using containe ...

javascriptjquerycssbootstrap-4bootstrap-popover

Navigating through a jQuery array while utilizing the $.inArray method

Below is an example of my Array that I am working with, retrieved from a successful jQuery .post call: data = JSON.parse(data); $(".chk_permission_").each(function() { if ($.inArray($(this).val(), data)) { $(thi ...

javascriptjqueryhtmlarrays

Assigning active classes based on the href attributes of child <a> tags

I've created a navigation structure as follows: <ul class="page-sidebar-menu"> <li class="menu"> <a href=""> <span class="title">Menu Item</span> <span class="arrow"></span> < ...

javascriptjquerycss

UTF-8 encoding experiencing issues on select Android mobile devices

Our new website, powered by Wordpress, is up and running but some users are experiencing issues with displaying Swedish special characters. It seems to be happening specifically on Android devices, regardless of the browser being used. However, I have not ...

cssencodingandroid

What is the best way to transfer a JavaScript variable to a PHP file and then store it in a PHP variable?

I am working on a webpage that displays multiple images, each of which can be replaced by another image in the same location. Adjacent to each image is a form where users can upload the new image. One important requirement is that the newly uploaded image ...

javascriptphphtmlajax

I require assistance in clearing the text field under specific circumstances

Incorporated in my webpage are text area controls that have been coded to automatically create a bullet-list when the user clicks on the text area or presses the 'ENTER' key. However, there is an issue - if the user clicks on the text area withou ...

javascriptjqueryhtml

What is the best way to resize an image to perfectly fit inside a div in a responsive design?

Currently implementing a fluid layout design using Twitter's Bootstrap. Below is an excerpt from my code: <div class="hero-unit" style="background-image:url('images/ball on sand.JPG'); background-size:100%;"> <h1>Pelican Volle ...

htmlcsstwitter-bootstrap

Centering the date vertically in JQuery Datepicker

I'm currently customizing the appearance of the jQuery datepicker, but I'm facing difficulty in aligning the dates vertically at the center. Here's the progress I've made so far: https://jsfiddle.net/L4vrkpmc/1/ Since the datepicker i ...

javascriptjqueryhtmlcssdatepicker

Designing a calendar with a grid template

I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css . ...

javascriptcssreactjscalendar

In Angular, encountering difficulty accessing object members within an array when using custom pipes

Here is a custom pipe that I have created, but I am facing an issue accessing the members of the customfilter array, which is of type Item. import { Pipe, PipeTransform } from '@angular/core'; import {Bus} from '/home/pavan/Desktop/Pavan ...

htmlangulartypescript

Setting a background-image using jQuery in Codeigniter can be done by following these steps

Currently, I am developing a project in Codeigniter. In my jQuery file, I have included code to set the background image of the body element: $('body').css('background-image','url(<?php echo base_url("assets/images/bg2.png");?& ...

phpjquerycsscodeigniter

Automatically customizable CSS border thickness

Consider the following example of a div element: <div style="height: 10%; width: 20%; border: 1px solid black"> Div Content </div> The div above has its height and width specified in percentages. I would like the border width to adjust a ...

javascriptjqueryhtmlcss

Using jQuery, how can I dynamically change the stacking order of an element when clicked?

I'm struggling to change the z-Index on button click. I have a static image and a dynamic div, and I want to send the #imgDiv1 behind the static image. Unfortunately, despite trying everything, I haven't been able to achieve this. You can check ...

javascriptjqueryhtmlcssz-index