Skills demo

First, define the controller for your skills.

In addition to the controller, you must define at least one skill.

Optionally, you can define a header and a description.

The example below is a minimal working example.

<div data-controller="easy-skills"><div data-easy="skill" data-easy-skill-progress="70">Skill name</div></div>

The minimal configuration uses the template setting 'one-dodgerblue-light' and disables animations.

Animations

You can enable animations, set the delay and duration, and configure whether an animation should start on an event, as well as the event name.

The bar below starts its animation after 2500 ms.

<div
    data-controller="easy-skills"
    data-easy-skills-animate-value="true"
    data-easy-skills-animate-delay-value="2500"
    data-easy-skills-animate-duration-value="2000"
>
    <div data-easy="skill" data-easy-skill-progress="70">Skill name</div>
</div>

The next example uses YASL to start the animation on an event.

Scroll down to see the animation start.

<div
    data-controller="easy-skills yasl"
    data-easy-skills-animate-value="true"
    data-easy-skills-animate-duration-value="2000"
    data-easy-skills-animate-on-event-value="true"
    data-easy-skills-animate-on-event-name-value="animationsDemoEvent"
    data-yasl-entry-event-name-value="animationsDemoEvent"
>
    <div data-easy="skill" data-easy-skill-progress="70">Skill name</div>
</div>

Styling

Besides the bars, you can also style the text color or the background as needed.

NOTICE: The text color cannot be changed for every template.

IMPORTANT: For some templates, it may be necessary to apply a custom text color, as Easy attempts to find the best possible contrast for the currently selected skill color, which may not always produce optimal results.

<div
    data-controller="easy-skills"
    data-easy-skills-text-color-value="red"
    data-easy-skills-light-color-value="lightblue"
>
    <div data-easy="skill" data-easy-skill-progress="70">Skill name</div>
</div>

<div
    data-controller="easy-skills"
    data-easy-skills-template-value="one-dodgerblue-dark"
    data-easy-skills-text-color-value="green"
    data-easy-skills-light-color-value="darkblue"
>
    <div data-easy="skill" data-easy-skill-progress="70">Skill name</div>
</div>

Templates

Below are examples of all available templates in the light scheme with animations enabled.

Template One

<div
    data-controller="easy-skills yasl"
    data-easy-skills-template-value="one-dodgerblue-light"
    data-easy-skills-text-color-value="white"
    data-easy-skills-animate-value="true"
    data-easy-skills-animate-duration-value="2000"
    data-easy-skills-animate-on-event-value="true"
    data-easy-skills-animate-on-event-name-value="animationsTemplateOneEvent"
    data-yasl-entry-event-name-value="animationsTemplateOneEvent"
>
    <div data-easy="header">My spells</div>
    <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
    <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
    <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
    <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
</div>

Template Two

<div
    data-controller="easy-skills yasl"
    data-easy-skills-template-value="two-dodgerblue-light"
    data-easy-skills-text-color-value="white"
    data-easy-skills-animate-value="true"
    data-easy-skills-animate-duration-value="2000"
    data-easy-skills-animate-on-event-value="true"
    data-easy-skills-animate-on-event-name-value="animationsTemplateTwoEvent"
    data-yasl-entry-event-name-value="animationsTemplateTwoEvent"
>
    <div data-easy="header">My spells</div>
    <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
    <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
    <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
    <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
</div>

Template Three

<div
                data-controller="easy-skills yasl"
                data-easy-skills-template-value="three-dodgerblue-light"
                data-easy-skills-animate-value="true"
                data-easy-skills-animate-duration-value="2000"
                data-easy-skills-animate-on-event-value="true"
                data-easy-skills-animate-on-event-name-value="animationsTemplateThreeEvent"
                data-yasl-entry-event-name-value="animationsTemplateThreeEvent"
                >
                <div data-easy="header">My spells</div>
                <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
                <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
                <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
                <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
                </div>

Template Four

<div
                data-controller="easy-skills yasl"
                data-easy-skills-template-value="four-dodgerblue-light"
                data-easy-skills-text-color-value="orange"
                data-easy-skills-animate-value="true"
                data-easy-skills-animate-duration-value="2000"
                data-easy-skills-animate-on-event-value="true"
                data-easy-skills-animate-on-event-name-value="animationsTemplateFourEvent"
                data-yasl-entry-event-name-value="animationsTemplateFourEvent"
                >
                <div data-easy="header">My spells</div>
                <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
                <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
                <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
                <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
                </div>

Template Five

<div
                data-controller="easy-skills yasl"
                data-easy-skills-template-value="five-dodgerblue-light"
                data-easy-skills-text-color-value="orange"
                data-easy-skills-animate-value="true"
                data-easy-skills-animate-duration-value="2000"
                data-easy-skills-animate-on-event-value="true"
                data-easy-skills-animate-on-event-name-value="animationsTemplateFiveEvent"
                data-yasl-entry-event-name-value="animationsTemplateFiveEvent"
                >
                <div data-easy="header">My spells</div>
                <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
                <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
                <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
                <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
                </div>

Template Six

<div
                data-controller="easy-skills yasl"
                data-easy-skills-template-value="six-dodgerblue-light"
                data-easy-skills-text-color-value="orange"
                data-easy-skills-animate-value="true"
                data-easy-skills-animate-duration-value="2000"
                data-easy-skills-animate-on-event-value="true"
                data-easy-skills-animate-on-event-name-value="animationsTemplateSixEvent"
                data-yasl-entry-event-name-value="animationsTemplateSixEvent"
                >
                <div data-easy="header">My spells</div>
                <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
                <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
                <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
                <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
                </div>

Template Seven

<div
                data-controller="easy-skills yasl"
                data-easy-skills-template-value="seven-dodgerblue-light"
                data-easy-skills-text-color-value="orange"
                data-easy-skills-animate-value="true"
                data-easy-skills-animate-duration-value="2000"
                data-easy-skills-animate-on-event-value="true"
                data-easy-skills-animate-on-event-name-value="animationsTemplateSevenEvent"
                data-yasl-entry-event-name-value="animationsTemplateSevenEvent"
                >
                <div data-easy="header">My spells</div>
                <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
                <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
                <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
                <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
                </div>

Template Eight

<div
                data-controller="easy-skills yasl"
                data-easy-skills-template-value="eight-dodgerblue-light"
                data-easy-skills-text-color-value="orange"
                data-easy-skills-animate-value="true"
                data-easy-skills-animate-duration-value="2000"
                data-easy-skills-animate-on-event-value="true"
                data-easy-skills-animate-on-event-name-value="animationsTemplateEightEvent"
                data-yasl-entry-event-name-value="animationsTemplateEightEvent"
                >
                <div data-easy="header">My spells</div>
                <div data-easy="subHeader">Those are the spells I have mastered on my journeys.</div>
                <div data-easy="skill" data-easy-skill-progress="70">Freeze</div>
                <div data-easy="skill" data-easy-skill-progress="55">Temporal displacement</div>
                <div data-easy="skill" data-easy-skill-progress="0">Meteorite</div>
                </div>