React 寫乙個 spinner 圓形載入動畫

2021-09-11 10:09:00 字數 2870 閱讀 8955

不支援ie和firefox,支援webkit瀏覽器。注意,在現代瀏覽器中需要使用-webkit-字首。

/* geometry values */

clip-path: inset(100px 50px);

clip-path: circle(50px

at 0 100px);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* box and geometry values combined */

clip-path: padding-box

circle(50px

at 0 100px);

複製**

一些 demo

classname="demo">

三角裁剪h4>

classname="clipclass1" />

圓形裁剪h4>

classname="clipclass2" />

橢圓裁剪h4>

classname="clipclass3" />

裁剪插圖h4>

classname="clipclass4" />

div>

複製**

.demo > div 

.clipclass1

.clipclass2

.clipclass3

.clipclass4

複製**

spinner.tsx

import react,  from

"react";

import proptypes from

"prop-types";

/** * @desc 載入動畫元件

* @param

* size: 半徑大小

* spinnercolor: 顏色

* spinnerwidth: 圓圈寬度

* visible: 是否顯示

*/export inte***ce ispinnerprops

class

spinner

extends

component

;render() = this.props;

if (!visible)

const = this.props;

const dimension = size || math.min(width, height);

return (

id=classname="spinner"

style=}

/>

);}}

export default spinner;

複製**

這裡我們還缺 spinner 的樣式,我們這裡建立乙個高階元件更好的擴充我們的 spinner。

使用上面的使用方法

import react from

"react";

const css = `

.spinner

// 其他瀏覽器支援 @-webkit-等 這裡為了節省空間就不加了,需要支援

@keyframes rota

to }@keyframes sweep

50%

100% }`;

const spinner_id = "spinner_id_style";

const id_holder = {};

id_holder.id = 0;

export

const spinnermixin = component =>

class

extends

react.component

else

if (head)

}//加上唯一 id 區分多個 spinner

id_holder.id += 1;

this.state = `};}

render() />;}};

複製**

import react,  from

"react";

import proptypes from

"prop-types";

import from

"./help";

// ...... some codes

export

default spinnermixin(spinner);

複製**

import react from

"react";

import reactdom from

"react-dom";

import spinner from

"./spinner";

function

return (

hello clip-pathh1>

classname="container">

載入動畫h4>

spinnercolor="red"

spinnerwidth=

size=

visible=

/>

div>

div>

);}const rootelement = document.getelementbyid("root");

複製**

然後就可以看到最開始的動畫效果了

python寫乙個服務 Python寫乙個服務

coding utf 8 import json from urllib.parse import parse qs from wsgiref.server import make server 定義函式,引數是函式的兩個引數,都是python本身定義的,預設就行了。定義檔案請求的型別和當前請求成功...

寫乙個東東

最近打了幾天的三國無雙6,感覺不錯!很久很久以前,乙個小學同學帶了我到機室玩三國無雙。自此,我便喜歡上了這個遊戲。現在我玩的遊戲內有兩個 三國無雙和cs。ps 曾經有些怪我的這個好朋友帶我打遊戲,但現在想來,若不是他,我的童年又怎麼會有歡樂呢。人活著,快樂是最重要的.因為以前是用專用手柄打的,感覺非...

寫乙個網頁

1 建立站點資料夾,站點資料夾的名字可以是中文 2 在站點資料夾下面建立子資料夾和子檔案 css js images html,前三個都是資料夾形式 子資料夾和子檔案的名字不能是中文 2.重置所有預設的樣式和設定一些全域性樣式,並將設定樣式的css檔案和對應的頁面關聯起來 3.劃分區域 如果的寬度大...