編集者
47
回編集
Tai
2020年1月25日 (土)に参加
編集の要約なし
{
{
width: 80%;
width: 80%;
height:100;
height:5em;
}
}
@media only screen and (max-device-width: 480px)
@media only screen and (max-device-width: 480px)
{
{
width: 80%;
width: 80%;
hight: 55;
hight: 5em;
}
}
svg.mainSvg
{
width: 80%;
height:100%;
}
@media only screen and (max-device-width: 480px)
{
svg.mainSvg
{
width: 80%;
hight: 100%;
}
}
}
}
</style>
</style>
</head>
</head>
<body><svg class="loadingBar" viewBox="0 0 100% 100%">
<body>
<rect x=0% width="0%" height="10%" fill="orangered">
<p>続行するには認証してください</p>
<animate attributeName="width" attributeType="XML" from="0%" to="50%" fill="freeze" dur="2s" repeatCount="never" id="loading1"/>
<svg class="loadingBar" viewBox="0 0 100% 100%">
<text y="1em" id="loadingStart"">認証</text>
<rect x=0% width="0%" height="1.1em" fill="orangered">
<animate attributeName="width" attributeType="XML" from="0%" to="50%" fill="freeze" begin="loadingStart.click" dur="2s" repeatCount="never" id="loading1"/>
<animate attributeName="fill" attributeType="XML" from="orangered" to="gold" fill="freeze" dur="2s" repeatCount="never" id="loading1"/>
<animate attributeName="fill" attributeType="XML" from="orangered" to="gold" fill="freeze" dur="2s" repeatCount="never" id="loading1"/>
<animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/>
<animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/>
</rect>
</rect>
<rect x="50%" width="0%" height="10%" fill="gold">
<rect x="50%" width="0%" height="1.1em" fill="gold">
<animate attributeName="width" attributeType="XML" begin="loading1.end" from="0%" to="50%" fill="freeze" dur="2s" repeatCount="never" id="loading2"/>
<animate attributeName="width" attributeType="XML" begin="loading1.end" from="0%" to="50%" fill="freeze" dur="2s" repeatCount="never" id="loading2"/>
<animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/>
<animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/>
</rect>
</rect>
<text x="102%">完了！</text>
<text y="3em">認証完了・閲覧可能です</text>
<rect y="2em" width="100%" height="2em" fill="white">
<animate attributeName="height" attributeType="XML" begin="loading2.end" from="2em" to="0" calcMode="discrete" dur="1s" fill="freeze" repeatCount="never" id="loadingEnd"/>
</rect>
</svg>
<svg class="mainSvg" viewBox="0 0 100% 100%">
<text y="3em" style="font-size: 2em; font-style: bold;">@taiについて</text>
</svg>
</svg>
</body>
</body>
</html>
</html>