AMP: how to do a Survey in CSS without using style="width"?

Question

I have a progress bar from a survey made of CSS and inside of the HTML tag I have a style="width" so I don't need to have classes like .width-99 { width: 99%;} for all the values.

Now, I have to make an amp version of it and I wanted to know if there is another way to do a progress bar without the .width-99 { width: 99%;} thing. Even because my code should be as lean as possible.

My other option is to disable it in AMP version, but it's also not ideal.

My code:

.survey {
	font-size: 1.9rem;
}

.survey-bar {
	display: inline-block;

	width: 91%;
	height: 3.8rem;

	border-radius: 4px;

	background: #EBEBEB;
}

.results {
	display: flex;

	margin-top: .5rem;

	align-items: center;
	justify-content: space-between;
}


.results span {
	display: inline-block;

	height: 3.8rem;

	border-radius: 4px;

	background: #777;
}

.results span.winner {
	display: flex;

	align-items: center;
	justify-content: flex-end;
}

/* 'tick' icon */
.results span.winner:before {
	padding-right: .5rem;

	font-family: 'icomoon';
	font-size: 2.7rem;
	color: #FFF;

	content: '\e90e';
}

<div class="results">
    15%
    <div class="survey-bar">
        <span style="width: 15%"></span>
    </div>
</div>
<p>It was popularised in the 1960s</p>
<div class="results">
    80%
    <div class="survey-bar">
        <span style="width: 80%" class="winner"></span>
    </div>
</div>
<p>Letraset sheets containing Lorem Ipsum passages</p>
<div class="results">
    5%
    <div class="survey-bar">
        <span style="width: 5%"></span>
    </div>
</div>

---

EDIT: AMP means Accelerated Mobile Pages.

Some rules:

• I have to put all CSS of the page inline
• I can only use one CSS inline in all the page

Website without AMP: LINK

AMP version: LINK

Answer 1

I find this open issue on Github and is really forbidden to use more than one inline CSS per page.

So, in my case, I'm going to remove all styles and only stay with the texts.