How do I append jumping dots to a text in html and css


Tags: html,css

Problem :

How do i append three dots to a text that are jumping, like in google hangouts, when somebody is typing. Is there a css/html only solution for this?



Solution :

It's pretty easy to accomplish with css animation and @keyframes

example on jsbin: http://jsbin.com/lejawoji/1/edit

I'm typing<span class="jumping-dots">
  <span class="dot-1">.</span>
  <span class="dot-2">.</span>
  <span class="dot-3">.</span>
</span>
<style>
.jumping-dots span {
  position: relative;
  bottom: 0px;
  animation: jump 2s infinite;
}
.jumping-dots .dot-1{
  animation-delay: 200ms;
}
.jumping-dots .dot-2{
  animation-delay: 400ms;
}
.jumping-dots .dot-3{
  animation-delay: 600ms;
}

@keyframes jump {
  0%   {bottom: 0px;}
  20%  {bottom: 5px;}
  40%  {bottom: 0px;}
}
</style>

    CSS Howto..

    DotNetNuke Skinning: How do I use\add skin.css?

    How to toggle display: inline and display toggle?

    How to make a span tag wider with an alphabet inside?

    HTML/CSS buttons don't show in IE properly

    how to add bootstrap, css, images ,js into google app engine?

    Bootstrap: how to stack divs of different heights?

    JSF - How can I format my global messages in in a visually appealing way?

    How do I organise divs that are nested inside each other?

    How to keep Div rotated with css after flip?

    how to have a div with two images in any of 9 possible positions

    How to prevent Float contents overlap other contents below

    How to select part of a custom element with CSS?

    How to change url of image which is generated dynamically just by using CSS and media queries?

    How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

    How set a page to maximum and minimum sizes via css

    how to set part of circle as background in css

    How to centre a table in html using css file? [duplicate]

    how to auto adjust table td width from the content

    how to make the img at the left side and the texts at the right side vertically line up

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to dynamically alter the CSS of a pseudo element with JQuery?

    How can I take advantage of Sass, for example, in rendering FizzBuzz?

    How to load CSS on PC and Mobile by jQuery?

    bootstrap modal disappear immediately after showing

    How to prevent Ajax overflow/server crash? (Arduino/ESP8266 Environment)

    How to properly align rows with bootstrap

    How to implement responsive, independently scrolling panes in Bootstrap 3?

    How to make carousel have a max width, and load without resize

    how to add an image on a div without losing previous content in CSS hover effect

    How to force a button inside a div not to inherit the parent CSS?