<section class="progressive-profiling-settings" data-behavior="progressive-profiling-settings" data-fanid="111">
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballGender">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">What are you here to do</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-1" value="Start learning" tabindex="-1">
<label for="setting-1-opt-1" tabindex="0">Start learning</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-2" value="Find courses" tabindex="-1">
<label for="setting-1-opt-2" tabindex="0">Find courses</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-3" value="Find session plans" tabindex="-1">
<label for="setting-1-opt-3" tabindex="0">Find session plans</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-4" value="Find articles" tabindex="-1">
<label for="setting-1-opt-4" tabindex="0">Find articles</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-1" type="radio" class="options" id="setting-1-opt-5" value="Find ongoing learning" tabindex="-1">
<label for="setting-1-opt-5" tabindex="0">Find ongoing learning</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballDisciplines">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">How long have you worked or volunteered in football?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-1" value="I have never worked or volunteered" tabindex="-1">
<label for="setting-2-opt-1" tabindex="0">I have never worked or volunteered</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-2" value="1 year" tabindex="-1">
<label for="setting-2-opt-2" tabindex="0">1 year</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-3" value="1 - 5 yers" tabindex="-1">
<label for="setting-2-opt-3" tabindex="0">1 - 5 yers</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-4" value="5 - 10 years" tabindex="-1">
<label for="setting-2-opt-4" tabindex="0">5 - 10 years</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-2" type="radio" class="options" id="setting-2-opt-5" value="10+ years" tabindex="-1">
<label for="setting-2-opt-5" tabindex="0">10+ years</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballType">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">Who do you work with?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-1" value="Male players" tabindex="-1">
<label for="setting-3-opt-1" tabindex="0">Male players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-2" value="Female players" tabindex="-1">
<label for="setting-3-opt-2" tabindex="0">Female players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-3" value="Mixed players" tabindex="-1">
<label for="setting-3-opt-3" tabindex="0">Mixed players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-4" value="Disabled players" tabindex="-1">
<label for="setting-3-opt-4" tabindex="0">Disabled players</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-5" value="Age 5 - 11" tabindex="-1">
<label for="setting-3-opt-5" tabindex="0">Age 5 - 11</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-6" value="Age 12 - 16" tabindex="-1">
<label for="setting-3-opt-6" tabindex="0">Age 12 - 16</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-7" value="Age 17 - 21" tabindex="-1">
<label for="setting-3-opt-7" tabindex="0">Age 17 - 21</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-8" value="Ages 22+" tabindex="-1">
<label for="setting-3-opt-8" tabindex="0">Ages 22+</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-3" type="checkbox" class="options" id="setting-3-opt-9" value="None" tabindex="-1">
<label for="setting-3-opt-9" tabindex="0">None</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballType">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">What level do you work at?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-1" value="Grassroots" tabindex="-1">
<label for="setting-4-opt-1" tabindex="0">Grassroots</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-2" value="Talent development" tabindex="-1">
<label for="setting-4-opt-2" tabindex="0">Talent development</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-3" value="Senior" tabindex="-1">
<label for="setting-4-opt-3" tabindex="0">Senior</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-4" type="checkbox" class="options" id="setting-4-opt-4" value="None" tabindex="-1">
<label for="setting-4-opt-4" tabindex="0">None</label>
</div>
</div>
</div>
<hr>
<div class="progressive-profiling-settings__wrapper" data-questions-type="FootballType">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">What’s your role in football?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-1" value="Coach" tabindex="-1">
<label for="setting-5-opt-1" tabindex="0">Coach</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-2" value="Referee" tabindex="-1">
<label for="setting-5-opt-2" tabindex="0">Referee</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-3" value="Medic/first aid" tabindex="-1">
<label for="setting-5-opt-3" tabindex="0">Medic/first aid</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-4" value="Talent ID" tabindex="-1">
<label for="setting-5-opt-4" tabindex="0">Talent ID</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-5" value="Club admin" tabindex="-1">
<label for="setting-5-opt-5" tabindex="0">Club admin</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-6" value="Teacher" tabindex="-1">
<label for="setting-5-opt-6" tabindex="0">Teacher</label>
</div>
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
<input name="question-5" type="radio" class="options" id="setting-5-opt-7" value="Safeguarding officer" tabindex="-1">
<label for="setting-5-opt-7" tabindex="0">Safeguarding officer</label>
</div>
</div>
</div>
<hr>
<a class="cta cta--efl save-preference-settings" tabindex="0" aria-disabled="true">
<span>Save Preferences</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</a>
</section>
No notes defined.
{
"questions": [
{
"number": 1,
"question": "What are you here to do",
"question-type": "FootballGender",
"multi-answer": false,
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
"options": [
{
"name": "question-1",
"value": "Start learning",
"id": "setting-1-opt-1"
},
{
"name": "question-1",
"value": "Find courses",
"id": "setting-1-opt-2"
},
{
"name": "question-1",
"value": "Find session plans",
"id": "setting-1-opt-3"
},
{
"name": "question-1",
"value": "Find articles",
"id": "setting-1-opt-4"
},
{
"name": "question-1",
"value": "Find ongoing learning",
"id": "setting-1-opt-5"
}
]
},
{
"number": 2,
"question": "How long have you worked or volunteered in football?",
"question-type": "FootballDisciplines",
"multi-answer": false,
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
"options": [
{
"name": "question-2",
"value": "I have never worked or volunteered",
"id": "setting-2-opt-1"
},
{
"name": "question-2",
"value": "1 year",
"id": "setting-2-opt-2"
},
{
"name": "question-2",
"value": "1 - 5 yers",
"id": "setting-2-opt-3"
},
{
"name": "question-2",
"value": "5 - 10 years",
"id": "setting-2-opt-4"
},
{
"name": "question-2",
"value": "10+ years",
"id": "setting-2-opt-5"
}
]
},
{
"number": 3,
"question": "Who do you work with?",
"question-type": "FootballType",
"multi-answer": true,
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
"options": [
{
"name": "question-3",
"value": "Male players",
"id": "setting-3-opt-1"
},
{
"name": "question-3",
"value": "Female players",
"id": "setting-3-opt-2"
},
{
"name": "question-3",
"value": "Mixed players",
"id": "setting-3-opt-3"
},
{
"name": "question-3",
"value": "Disabled players",
"id": "setting-3-opt-4"
},
{
"name": "question-3",
"value": "Age 5 - 11",
"id": "setting-3-opt-5"
},
{
"name": "question-3",
"value": "Age 12 - 16",
"id": "setting-3-opt-6"
},
{
"name": "question-3",
"value": "Age 17 - 21",
"id": "setting-3-opt-7"
},
{
"name": "question-3",
"value": "Ages 22+",
"id": "setting-3-opt-8"
},
{
"name": "question-3",
"value": "None",
"id": "setting-3-opt-9"
}
]
},
{
"number": 4,
"question": "What level do you work at?",
"question-type": "FootballType",
"multi-answer": true,
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ",
"options": [
{
"name": "question-4",
"value": "Grassroots",
"id": "setting-4-opt-1"
},
{
"name": "question-4",
"value": "Talent development",
"id": "setting-4-opt-2"
},
{
"name": "question-4",
"value": "Senior",
"id": "setting-4-opt-3"
},
{
"name": "question-4",
"value": "None",
"id": "setting-4-opt-4"
}
]
},
{
"number": 5,
"question": "What’s your role in football?",
"question-type": "FootballType",
"multi-answer": false,
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
"options": [
{
"name": "question-5",
"value": "Coach",
"id": "setting-5-opt-1"
},
{
"name": "question-5",
"value": "Referee",
"id": "setting-5-opt-2"
},
{
"name": "question-5",
"value": "Medic/first aid",
"id": "setting-5-opt-3"
},
{
"name": "question-5",
"value": "Talent ID",
"id": "setting-5-opt-4"
},
{
"name": "question-5",
"value": "Club admin",
"id": "setting-5-opt-5"
},
{
"name": "question-5",
"value": "Teacher",
"id": "setting-5-opt-6"
},
{
"name": "question-5",
"value": "Safeguarding officer",
"id": "setting-5-opt-7"
}
]
}
],
"save-preference-settings": {
"href": "#",
"copy": "Save Preferences",
"additionalClass": "save-preference-settings"
}
}
export default parentElement => {
const questions = parentElement.querySelectorAll(
'.progressive-profiling-settings__wrapper'
);
const settingsCta = parentElement.querySelector('.save-preference-settings');
const { fanid } = parentElement.dataset;
async function updateProfileSettingsDataCallback(personalisationData) {
const url = `/Personalise/UpdateProgressivePersonalisation`;
// eslint-disable-next-line compat/compat
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache',
Pragma: 'no-cache',
Expires: '0',
},
body: personalisationData,
});
return response.json();
}
function updateProfileSettingsData(personalisationData) {
// console.log(imageUploadData);
try {
// isAjaxRuning = true;
updateProfileSettingsDataCallback(personalisationData).then(response => {
if (response) {
settingsCta.classList.remove('loading-bar');
settingsCta.setAttribute('aria-disabled', 'false');
}
});
} catch (e) {
settingsCta.classList.remove('loading-bar');
settingsCta.setAttribute('aria-disabled', 'false');
throw new Error('Unable to update profile settings ::', e);
}
}
const generateProfileSettingsData = () => {
const eflPersonalisation = [];
let ansInc = 0;
questions.forEach(question => {
const questionElment = question.querySelector('.question');
const { questionId } = questionElment.dataset;
const { questionsType } = question.dataset;
const questionText = questionElment.innerText;
const answerDetails = [];
const settingOptions = question.querySelectorAll('input');
let inc = 0;
settingOptions.forEach(option => {
if (option.checked) {
const { optionId } = option.closest('.option-container').dataset;
const setting = `{
"answer": "${option.value}",
"answerId": "${optionId}"
}`;
answerDetails[inc] = JSON.parse(setting);
inc += 1;
}
});
if (answerDetails.length) {
const questionDetails = `{
"question": "${questionText}",
"questionId": "${questionId}",
"questionTag": "${questionsType}",
"answerDetails": ${JSON.stringify(answerDetails)}
}`;
eflPersonalisation[ansInc] = JSON.parse(questionDetails);
ansInc += 1;
}
});
const personalisationData = `{
"id": "${fanid}",
"eflPersonalisation": ${JSON.stringify(eflPersonalisation)}
}`;
// console.log(personalisationData);
return personalisationData;
};
const checkOptSelected = () => {
const optionContainers = parentElement.querySelectorAll('input');
optionContainers.forEach(element => {
if (element.checked) {
settingsCta.setAttribute('aria-disabled', 'true');
settingsCta.setAttribute('disabled', 'disabled');
}
});
};
settingsCta.addEventListener('click', e => {
e.preventDefault();
settingsCta.classList.add('loading-bar');
settingsCta.setAttribute('aria-disabled', 'true');
settingsCta.setAttribute('disabled', 'disabled');
const profileSettingData = generateProfileSettingsData();
updateProfileSettingsData(profileSettingData);
});
window.addEventListener('click', e => {
const clickedElement = e.target;
if (clickedElement.tagName === 'INPUT') {
const allSettingsParent = clickedElement.closest(
'.progressive-profiling-settings'
);
if (!allSettingsParent) {
return;
}
const optionContainers = allSettingsParent.querySelectorAll('input');
optionContainers.forEach(element => {
if (element.checked) {
settingsCta.removeAttribute('disabled');
}
});
}
});
window.addEventListener('keydown', event => {
if ((event.keyCode === 13 || event.keyCode === 32) && parentElement) {
const { target } = event;
const progressiveSettings = target.closest(
'.progressive-profiling-settings'
);
if (!progressiveSettings) {
return;
}
if (
target.closest('.save-preference-settings') ||
target.previousElementSibling.type === 'checkbox' ||
target.previousElementSibling.type === 'radio'
) {
target.click();
target.focus();
}
}
});
checkOptSelected();
};
.progressive-profiling-settings {
background-color: $white;
border-radius: 0.8rem;
padding: 2.4rem;
width: 100%;
&__wrapper {
&--question {
.question {
color: $blue;
margin-bottom: 0.8rem;
@extend .efl-heading-4;
}
p {
color: $color-interface-light;
margin-bottom: 2.4rem !important;
font-size: 1.8rem;
line-height: 2.4rem;
@extend .efl-p-medium;
}
}
&--option {
.option-container {
display: inline-flex;
margin-right: 1.6rem;
input[type='checkbox'] {
display: none;
}
input[type='radio'] {
display: none;
}
label {
font-size: 1.6rem;
font-weight: 500;
padding: 0.8rem 2.4rem;
border: 0.2rem solid $light-blue;
color: $blue;
border-radius: 0.4rem;
cursor: pointer;
@extend .efl-p-medium;
}
input:checked + label {
background: $blue;
color: $white;
border: 0.2rem solid $blue;
padding: 0.8rem 1.3rem;
&::before {
content: '';
position: relative;
display: inline-block;
background-image: url('./assets/images/settings-tick.svg');
background-repeat: no-repeat;
background-size: cover;
width: 1.2rem;
height: 1rem;
margin-right: 1rem;
}
}
}
}
}
.save-preference-settings[disabled] {
border: none;
color: #b7c5e9;
background-color: #eceef3;
cursor: default;
&:hover {
color: #b7c5e9 !important;
}
}
hr {
border: 0.1rem solid $grey-light;
margin-top: 0.8rem;
margin-bottom: 2.4rem;
}
.cta {
max-width: initial;
min-height: 5rem;
line-height: 1.8rem;
letter-spacing: 0.02em;
color: $white;
span {
font-weight: 500;
}
&:hover {
color: $white;
}
svg {
display: none;
}
&.loading-bar {
span {
display: none;
}
svg {
display: flex;
}
}
}
@media (min-width: $mq-medium) {
padding: 4rem;
&__wrapper {
&--option {
.option-container {
margin-bottom: 1.6rem;
}
}
}
}
@media screen and (max-width: $mq-medium) {
&__wrapper {
&--option {
.option-container {
width: 100%;
display: grid;
text-align: center;
margin-bottom: 1.2rem;
}
.option-container:last-child {
margin-bottom: 1.6rem;
}
}
}
hr {
margin-top: 0;
margin-bottom: 1.6rem;
}
}
}
<section class="progressive-profiling-settings" data-behavior="progressive-profiling-settings" data-fanid="111">
{{#each questions}}
<div class="progressive-profiling-settings__wrapper" data-questions-type="{{question-type}}">
<div class="progressive-profiling-settings__wrapper--question">
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">{{question}}</div>
<p>{{copy}}</p>
</div>
<div class="progressive-profiling-settings__wrapper--option">
{{#each options}}
<div class="option-container" data-option-id="e94b8e0fe57d4668a15f0122c4098c83">
{{#if ../multi-answer}}
<input name="{{name}}" type="checkbox" class="options" id="{{id}}" value="{{value}}" tabindex="-1">
{{/if}}
{{#unless ../multi-answer}}
<input name="{{name}}" type="radio" class="options" id="{{id}}" value="{{value}}" tabindex="-1">
{{/unless}}
<label for="{{id}}" tabindex="0">{{value}}</label>
</div>
{{/each}}
</div>
</div>
<hr>
{{/each}}
<a class="cta cta--efl save-preference-settings" tabindex="0" aria-disabled="true">
<span>Save Preferences</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;"
xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s"
repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s"
repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s"
repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s"
repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s"
repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s"
repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s"
repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s"
repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s"
repeatCount="indefinite"></animate>
</rect>
</svg>
</a>
</section>