కోర్సు సిఫార్సులు:

ఎలా సృష్టించాలి: CSS లోడర్

亲自试一试

CSS ద్వారా ప్రీలోడర్ సృష్టించడం నేర్చుకోండి.

లోడర్ సృష్టించడం ఎలా చేయాలి

మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి:

<div class="loader"></div>

.loader {
  రెండవ చర్య - సిఎస్ఎస్ జోడించండి:
  border: 16px solid #f3f3f3; /* మేఘం రంగు */
  border-top: 16px solid #3498db; /* నీలం */
  border-radius: 50%;
  width: 120px;
  height: 120px;
}
animation: spin 2s linear infinite;
  @keyframes spin {
  0% { transform: rotate(0deg); }
}

亲自试一试

100% { transform: rotate(360deg); }

ఉదాహరణ వివరణలు: borderఅనునాయి నిర్దేశించబడింది లో లోడర్ బార్డర్ పరిమాణం మరియు రంగును నిర్దేశించబడింది. border-radius

బార్డర్ లోపల స్పిన్ అవుతున్న నీలం భాగం నిర్దేశించబడింది అనునాయి లో లోడర్ ను చక్రాకారంగా మార్చుతుంది. border-top అనునాయి నిర్దేశించండి. మీరు మరిన్ని "స్పిన్" లను కావాలి అని కావాలి అయితే, కూడా చేర్చండి border-bottomమరియుborder-left మరియు/లేదా border-rightమరియు కింది ఉదాహరణలో చూడండి).

లోడర్ పరిమాణం నిర్దేశించబడింది width మరియు height అనునాయి నిర్దేశించండి.

చివరగా, మేము ఒక అనిమేషన్ జోడించాము ఇది నీలం భాగం ఎల్లప్పుడూ 2 సెకన్ల అనిమేషన్ వేగంతో స్పిన్ అవుతుంది.

మెరుగుపరచండి:మద్దతు లేని బ్రాసర్లకు animation మరియు transform అనువర్తనం బ్రాసర్లకు ఆస్తిగా ఉన్న అనునాయి ఆస్తిని, మీరు కూడా చేర్చాలి -webkit- ప్రీఫిక్స్. ప్రతిసాధనను చూడండి ఎలా చేయాలనే పరిశీలించండి.

మరిన్ని స్పిన్ లను జోడించండి

实例

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

亲自试一试

另一个例子

如何将加载器放置在页面中间，并在加载完成时显示“页面内容”：

实例

亲自试一试