DEV Community: Michele Mirandola

How to make a simple unread notification animation (ex: with a bell icon)

Michele Mirandola — Fri, 17 Sep 2021 12:53:39 +0000

When building notifications UI elements it is very common to point out when a user has new elements to read. This is achieved in most cases with an animation, for example if we have a bell icon we're gonna to make it swing every # seconds.

Today we're gonna to see this, you can find a finished example in this pen.

As usual we're gonna use FontAwesome and, in this case, the SVG format of the "fa-bell" icon (remember to read the license indications). So, when we have it's markdown on our page we will add this animation (Courtesy of Animate.css).

The animation (part 1)

svg {
    animation: custom-swing 1s;
    -webkit-animation: custom-swing 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

The main animation is set, but as you can see it's... too invasive 😜: our bell swings "forever" and fast.

We need to add some "delay" in the main animation between the swings, so we will use some Math and logic to get around it.

The animation (2 part)

In few words we need do edit the keyframe in order to "finish" the animation early, leaving some "space" as a delay.
At the moment our animation last 1 second, but if we want to our bell swing for 1 second and wait "about" 4 seconds before another one we have to set the animation to 5 seconds.

After this, we have to "divide" and limit the animation timing to complete in about 1/5 of the total.

svg {
    animation: custom-swing 5s;
    -webkit-animation: custom-swing 5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

Here it is, now we have some delay between the swings, and you can play with duration and percentages as you like to adjust the result!

Photo by Arturo Rey on Unsplash

How to style an input file with some help from Bootstrap and FontAwesome

Michele Mirandola — Wed, 08 Sep 2021 16:49:39 +0000

You know, styling an is hard, basically due to some standard behaviors of the browsers that keeps this kind of input aspect a bit ugly.

So, i'll show you a simple method to use when you have to enchance a form with this kind of input, assuming you're using Bootstrap in your project.

PS: You can check the final markup here con this Pen

Here is the main markup (as you can see this is a "basic" bootstrap form-group, except for the "file-field" class that we will use it to customize our field):

<div class="form-group file-field">
    <input class="form-control" type="file" name="attachment" id="contact-attachment">
    <label class="form-label" for="contact-attachment">Select the  file...</label>
</div>

The key for our porpuse will be style the <label> to "cover" the <input>. Let's see how to do this:

.file-field label {
    cursor: pointer;
    /* Here we will "duplicate" a bootstrap basic style */
    height: 36px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: .375rem .75rem;
    width: 100%;
    /* Style as you please, it will become the visible UI component. */
}
.file-field input[type="file"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

Here it is! We've just created a basic workaround to "cover" the ugly part of the borowser aspect of the input.

But we can do slightly better adding an icon with my favourite service FontAwesome.

We can add a <i class="faS fa-folder mr-2"></i> inside our <label>:

<div class="form-group file-field">
    <input class="form-control" type="file" name="attachment" id="contact-attachment">
    <label class="form-label" for="contact-attachment"><i class="fas fa-folder mr-2"></i>Select the  file...</label>
</div>

We can also style the icon on the label "hover":

.file-field label:hover i {
    color: purple; /* or whatever color you want */
}

Pretty easy, isn't it?. Let me know if you have any trouble, I left a bug on the code etc... ( and forgive me for my english of course :-) )

Have a nice day!

Photo by James Harrison on Unsplash

Hi, I'm Michele Mirandola

Michele Mirandola — Fri, 03 Feb 2017 11:31:39 +0000

I have been coding for 7 years.

You can find me on GitHub as Miralo

I live in Verona, Italy.

I work for EWake (Agency)

I mostly program in these languages: Css, Sass, Javascript, Pug, Twig.

I am currently learning more about ES6/7, Vue.js, NodeJs and the world around them.

Nice to meet you.