Aura effect
Element type
Class
Element code
item-relative animated-redcircle box-flex-center
Action
Added itself the active toggle class, with the data-show will call the element with the status "display: block" and data-hide will action the element with the status "display: none;"
Example code
<div class="item-relative animated-redcircle box-flex-center">
<div class="item-absolute redcircle redcircle-1"></div>
<div class="item-absolute redcircle redcircle-2"></div>
<div class="item-absolute redcircle redcircle-3"></div>
<div class="item-absolute box-flex-center data-text white">..TEXT HERE..</div>
</div>
Example
..TEXT HERE..
Clock ticking
Element type
Class
Element code
data-count
Attribute
data-count-target, data-count-start, data-count-end, data-count-delay
Action
Adds the ability to the element to be able to count the number and also controlling of the counting delay
Example code
<div class="data-count" data-count-target="data-text-promo-1" data-count-start="0" data-count-end="500" data-count-delay="1">Button Counting number</div>

<div class="data-text-promo-1">0</div>
Example
Button Counting number
0
Animated element
Element type
Class
Element code
class="animated"

For custom the duration timing of the object

-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
Action
Creates animated element from begins and end.
Example

Clcik the object for testing the animated

Fade in, Fade out element
Element type
Class
Element code

class="fadein", class="fadeout"

-webkit-animation: fadein 1s linear;
-moz-animation: fadein 1s linear;
-ms-animation: fadein 1s linear;
-o-animation: fadein 1s linear;
animation: fadein 1s linear;


-webkit-animation: fadeout 1s linear;
-moz-animation: fadeout 1s linear;
-ms-animation: fadeout 1s linear;
-o-animation: fadeout 1s linear;
animation: fadeout 1s linear;
Action
Creates fade in/out element.
Example

Fade in    Fade out    Reset

Loader icon
Element type
Class
Element code
<figure class="icon-loading"></figure>
Action
Creates the loader icon animation figure element.
Example
Button Loader toggle
Element type
Class
Element code
class="loader-toggle""
Action
Activate the loader icon status.
Example

Loading toggle

Date counting down
Element type
Class
Element code
<span class="el-countdown ...SPECIFICLASS_HERE.." data-countdown="...SPECIFICLASS_HERE.." data-setdate="..DATE_TARGET.." data-returntime="days"></span>

Date format must be "mmm d, yyyy h:m:s"
for example = "July 22, 2021 0:0:0"
Attribute
data-countdown, data-setdate, data-returntime

data-countdown = Element target will be shown counting date
data-setdate = Set date target
data-returntime = set type of the returning time which can specific the returns are "dates", "hours", "minutes", "seconds"
Action
Activate the loader icon status.
Example

Set date target is "July 22, 2021 0:0:0"

days :  hours :  minutes :  seconds
Hamburger icon
Element type
Class
Element code
class="icon-box btn-toggle" and class="nav-icon"
Action
You will be able to interact when you click the icon and the icon will be changed frin hamburger icon to close icon without the images.
Example code
<div class="icon-box btn btn-toggle">
<div class="nav-icon">
<div> </div>
</div>
</div>

Example
Spining icon
Element type
Class
Element code
class="icon-animated-loading" and class="bar"
Action
Adds the ability to the element to be able to show the loop of the icon spining
Example code
<div class="icon-animated-loading bar">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>

</div>

Example