Fireworks

Fireworks is a minimal component to express something is done successfully.

A simple fireworks example

It is simply a wrapper .fireworks with three elements inside that have the .spark class.

index.html

<div class="fireworks" aria-hidden="true">
  <span class="spark"></span>
  <span class="spark"></span>
  <span class="spark"></span>
  <span class="spark"></span>
</div>

Accessibility matters!

This element does not have meaning for assistive technologies and it is just a fancy ornate, thus we should hide it from the accessibility tree by setting aria-hidden="true".
Read more about aria-hidden.

Simple

You can add the .simple class to the .fireworks, it will remove the main glow effect.

index.html

<div class="fireworks simple" aria-hidden="true">
  <span class="spark"></span>
  <span class="spark"></span>
  <span class="spark"></span>
  <span class="spark"></span>
</div>

Sizes

To change the fireworks size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<div class="fireworks size-xs" aria-hidden="true">...</div>
<div class="fireworks size-lg" aria-hidden="true">...</div>
<div class="fireworks size-3x" aria-hidden="true">...</div>

Color & customization

Fireworks can be customized with CSS variables that is defined for it. Here is the list of them:

Color:
--flatify__firework-color-main
--flatify__firework-color-center-top-bottom
--flatify__firework-color-center-left-right
--flatify__firework-color-left-top-bottom
--flatify__firework-color-right-top-bottom

Animation:
--flatify__firework-animation-delay
--flatify__firework-animation-duration
--flatify__firework-animation-iteration-count

The example below shows how to use this variables:

index.html

<div class="fireworks my-custom-fireworks-1" aria-hidden="true">...</div>
<div class="fireworks my-custom-fireworks-2" aria-hidden="true">...</div>
<div class="fireworks my-custom-fireworks-3" aria-hidden="true">...</div>

style.css

.my-custom-fireworks-1,
.my-custom-fireworks-2,
.my-custom-fireworks-3 {
  --flatify__firework-color-main: #ffce54;
  --flatify__firework-color-center-top-bottom: #fc6e51;
  --flatify__firework-color-center-left-right: #f6bb42;
  --flatify__firework-color-left-top-bottom: #2ecc71;
  --flatify__firework-color-right-top-bottom: #ec87c0;
  --flatify__firework-animation-duration: 2s;
}

.my-custom-fireworks-1 {
  --flatify__firework-animation-delay: 200ms;
}

.my-custom-fireworks-2 {
  --flatify__firework-animation-delay: 400ms;
}

.my-custom-fireworks-3 {
  --flatify__firework-animation-delay: 600ms;
}

Dynamic color for fireworks

FlatifyCSS has predefined animation and helper classes to change the element hue, you can use flatify-hue and flatify-hue-min animations or directly set animation setter helper classes that are .anim-hue and .anim-hue-min.

index.html

<div class="fireworks anim-hue" aria-hidden="true">...</div>
<div class="fireworks anim-hue-min" aria-hidden="true">...</div>