Je ne sais pas comment formater mon html pour qu'il affiche mes textes de chargement au lieu du substitut "..." que j'ai défini.
@keyframes loading-text {
0% {
content: "Pizza";
}
30% {
content: "Burgers";
}
35% {
content: "Chicken";
}
60% {
content: "Hot Dogs";
}
75% {
content: "Funnel Cakes";
}
90% {
content: "Ice Cream";
}
95% {
content: "Tacos";
}
}
.loading-text {
top: 205px;
margin: auto;
font-family: sans-serif;
font-size: 1.5em;
}
.loading-text:after {
content: "Welcome";
font-weight: bold;
animation-name: loading-text;
animation-duration: 12s;
animation-iteration-count: 1;
}
body {
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.triangle {
stroke-dasharray: 17;
animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 136;
}
}
.loading {
font-family: 'Orbitron', sans-serif;
font-size: 7px;
animation: blink .9s ease-in-out infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<svg width="200" height="200" viewBox="0 0 40 60">
<polygon class="triangle" fill="none" stroke="#fc0303" stroke-width="1" points="16,1 32,32 1,32" />
<text class="loading" x="0" y="45" fill="#fff">...</text>
</svg>
<div class="scss-loader">
</div>JSFiddle : https://jsfiddle.net/j12eqhuy/5/
Je ne sais pas comment lier les textes css à la place de la chaîne "...", car je suis très novice en la matière.
